I am writing a blog using Hexo
For example：(Markdown)
菜单 >> 数学 >> `\frac{}{}` >> `\frac{%|}{}`
rendered to：(HTML)
Related
I need to convert some HTML to Markdown with Pandoc. All is fine except the code blocks in my document are not converted properly. I need them to appear in the resulting Markdown document as backtick-code blocks with syntax definition.
For example, if I have such source HTML:
<pre class="python"><code>
def myfunc(param):
'''Description of myfunc'''
return do_something(param)
</code></pre>
I want Pandoc to convert it into:
```python
def myfunc(param):
'''Description of myfunc'''
return do_something(param)
```
But what I am getting is:
``` {.python}
def myfunc(param):
'''Description of myfunc'''
return do_something(param)
```
It's almost there, but the syntax definition is in curly braces and with a dot, which is not recognised by my Markdown parser. How can I get ```python instead of ``` {.python} when converting HTML to Markdown?
I have control over the source HTML, so I can change it the way needed. If there's an option to insert "raw markdown" into the HTML which will be ignored by Pandoc, that would work for me too, I can embed those blocks into the source HTML the way I need, but I need to tell Pandoc not to touch them. But I can't find such option in the docs.
This behavior is governed by the fenced_code_attributes extension. It is enabled by default; disabling it will give your desired output:
pandoc --to=markdown-fenced_code_attributes ...
I want to translate this snippet of HTML into Markdown using pandoc.
<code class="code_block"># chown root:root /boot/grub/grub.cfg<br/># chmod og-rwx /boot/grub/grub.cfg
</code>
The output I want to have, is something like this.
```
# chown root:root /boot/grub/grub.cfg
# chmod og-rwx /boot/grub/grub.cfg
```
But the output I never includes the <br> respectively a line break in the markdown file.
# chown root:root /boot/grub/grub.cfg# chmod og-rwx /boot/grub/grub.cfg
I already tried different commands and extensions.
$ pandoc -f html -t markdown t.html
$ pandoc -f html -t markdown+hard_line_breaks t.html
$ pandoc -f html -t markdown+raw_html+hard_line_breaks t.html
$ pandoc -f html -t markdown+raw_html+hard_line_breaks-inline_code_attributes t.html
Am I missing something?
This is due to the way pandoc represents inline code internally: the code is stored as a string of verbatim text together with a set of attributes. Newlines, being layout commands, don't fit into this representation and are ignored.
Note also that the above is a rather uncommon way of writing multi-line code. See, e.g., the MDN docs on the <code> element:
To represent multiple lines of code, wrap the <code> element within a <pre> element. The <code> element by itself only represents a single phrase of code or line of code.
The problem is that your code block is not properly formatted as a code block. You need (at least) the following:
<pre><code># chown root:root /boot/grub/grub.cfg
# chmod og-rwx /boot/grub/grub.cfg
</code></pre>
In addition to the HTML spec, covered in #tarleb's answer, the Markdown rules also differentiate between a code block and a code span based solely on the existence (or not) of the <pre> tag.
Note that the original Markdown rules demonstrate a code block as generating this HTML:
<pre><code>This is a code block.
</code></pre>
A <code> tag wrapped in a <pre> tag. In contrast, the same rules demonstrate a code span generating this HTML:
<p>Use the <code>printf()</code> function.</p>
Note that only the <code> tag is used, but it is only an inline span (wrapped in a <p>, not a block level element.
When Pandoc is converting from HTML back to Markdown it follows the same convention in reverse. Yes, you have class="code_block" set on your <code> tag, but Pandoc doesn't know what that means, nor should it. And yes, your <code> element is not wrapped in a <p>, but that is just poorly formed HTML (according to the HTML spec, <code> is not a block-level element, but phrasing content; that is, content which gets wrapped in a block-level element such as a <p> or a <pre> element).
And then there is the issue of your <br> tag. How would Pandoc know if that is part of the code or a styling hook? In fact, it doesn't. Which is why we use <pre> tags for multi-line code blocks. With the <pre> tag, whitespace is preserved. Therefore, you only need a newline character without the <br> tag.
For completeness, I realize that the original Markdown rules do not include fenced code blocks, so I will also point to the GitHub Flavored Markdown spec, which also demonstrates fenced code blocks as producing <pre><code> wrapped blocks. Naturally, to go in reverse, you would need to start with <pre><code> wrapped blocks to end up with fenced code blocks.
I'm converting org and markdown files to HTML using pandoc. I want to set metadata such as the title, subtitle, and author tags in an external YAML file and have them display using a template. However I can't get anything to appear beyond the normal body conversion.
I'm using the default HTML template. I've run the conversion concatenating the YAML config beforehand:
pandoc -t html -o output.html metadata.yaml input.md
I also tried including the yaml_metadata_block extension:
pandoc -t html+yaml_metadata_block -o output.html metadata.yaml input.md
Also, I've tried setting the variables in the command itself:
pandoc -t html -o output.html -V title="my title" input.md
My YAML file looks like this:
---
title: "my title"
subtitle: "my subtitle"
author: "the author"
...
Inspecting the default html template with pandoc -D html, it looks like when title etc. are defined, it'll place in a header block:
$if(title)$
<header>
<h1 class="title">$title$</h1>
$if(subtitle)$
<p class="subtitle">$subtitle$</p>
$endif$
$for(author)$
<p class="author">$author$</p>
$endfor$
$if(date)$
<p class="date">$date$</p>
$endif$
</header>
But in every case, the html file only contains the converted text from input.md. I think this is the $body$ line defined in the default template.
How can I get these fields to appear in my html document?
My goodness, all I was missing is the -s attribute!
from the man page:
-s, --standalone
Produce output with an appropriate header and footer (e.g. a standalone HTML, LaTeX, TEI, or RTF file, not a fragment). This option is set automat‐
ically for pdf, epub, epub3, fb2, docx, and odt output.
Thus the following command works as expected
pandoc -s -t html -o output.html metadata.yaml input.md
I thought it's possible to write pure HTML as input in Jade files but I get an error while trying.
For this HTML
div(ng-controller="TestController")
h1 Services list
ul(ng-model="test")
li(ng-repeat="item in items")
a
| {{ item.name }}
div(ui-view)
I get the following error
Running "watch" task
Waiting...
>> File "app/frontend/views/home.jade" changed.
Running "jade:compile" (jade) task
>> Error: app/frontend/views/home.jade:2
>> 1| <b>hello </b> test
>> > 2| <ul ng-model="test">
>>
>> unexpected token "indent"
Warning: Jade failed to compile "app/frontend/views/home.jade".
>> Destination not written because compiled files were empty.
>> 5 files created.
Running "watch" task
Waiting...
apparently by starting with a pipe | this should work
| Plain text can include <strong>html</strong>
p
| It must always be on its own line
jade-lang.com/reference/plain-text
Outputting plain text should look like this:
pre
<div>Stuff</div>
Instead of just writing plain HTML code into the .jade file(s) you'll need to use the Jade syntax for HTML files:
doctype html
html(lang="en")
head
title= pageTitle
script(type='text/javascript').
if (foo) {
bar(1 + 5)
}
body
h1 Jade - node template engine
#container.col
if youAreUsingJade
p You are amazing
else
p Get on it!
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
Edit:
To use plain HTML tags within Jade you basically got 2 possibilities:
p Plain text can include <strong>html</strong>
or | Plain text can include <strong>html</strong>
p
| It must always be on its own line
You can check on further details here: http://jade-lang.com/reference/plain-text/
I'm currently experimenting with Jekyll. Most things look fine, but the way Jekyll processes code highlighting seems to be buggy.
I use pygments.
Then Jekyll seems to use pieces like:
{% highlight python %}
#!/usr/bin/env python
def wer(r, h):
"""
{% endhighlight %}
to generate code like
<div class="highlight">
<pre>
<code class="python"><span class="c">#!/usr/bin/env python</span>
<span class="k">def</span> <span class="nf">wer</span><span class="p">(</span><span class="n">r</span><span class="p">,</span> <span class="n">h</span><span class="p">):</span>
<span class="sd">"""</span>
<span class="sd"> Calculation of WER with Levenshtein distance.</span>
<span class="sd"> Works only for iterables up to 254 elements (uint8).</span>
<span class="sd"> O(nm) time ans space complexity.</span>
[...]
<span class="n">doctest</span><span class="o">.</span><span class="n">testmod</span><span class="p">()</span>
</code>
</pre>
</div>
which looks like
The problem is whitespace between code and pre:
How can I tell Jekyll not to put whitespace between those tags?
repository with my blog
a rendered example page (with this source page).
Bug hunting
My Jekyll version is jekyll 1.3.1.
With gem environment I found that my gems are at /var/lib/gems/1.9.1.
With grep -rn "highlight" --exclude-dir=site --exclude-dir=test * I found that the highlight tag gets parsed in /var/lib/gems/1.9.1/gems/jekyll-1.3.1/lib/jekyll/tags/highlight.rb
As this might be a Jekyll bug, I've added issue 1801
Now comes the strange part: highlight.rb seems not to add any whitespace between <pre> and <code>.
This problem is caused by Liquid, the templating engine of Jekyll (see Issue 216 of Liquid and Issue 1806 of Jekyll).
The current (12.12.2013) answer to this question is: You cannot keep Jekyll from adding those whitespaces.
But a fix to the underlying problem is to remove the whitespaces after all pages have been compiled. I've written the following Python script to do so:
#!/usr/bin/env python
import re, fnmatch, os
def removeWhitespace(file_path):
#read file content
with open(file_path) as f:
content = f.read()
#replace whitespace
openingTag = re.compile('<pre>\s*<code', re.DOTALL)
closingTag = re.compile('</code>\s*</pre>', re.DOTALL)
if re.findall(openingTag, content):
content = re.sub(openingTag, '<pre><code', content)
content = re.sub(closingTag, '</code></pre>', content)
#write without whitespace
with open(file_path,'w') as f:
f.write(content)
# Get all HTML files
files = []
for root, dirnames, filenames in os.walk('.'):
for filename in fnmatch.filter(filenames, '*.html'):
files.append(os.path.join(root, filename))
for filename in files:
removeWhitespace(filename)
This is stylesheet related.
I was able to build your sample page on my test environment using the default without any problem*.
Try adding the following to style.css
/* standard */
.post pre {
border: 1px solid #ddd;
background-color: #eef;
padding: 0 .4em;
}
* Only problem I had was it complained about the following line
Jekyll is a static blog generator.
Which I resolved by wrapping the line in a paragraph tag.