I’ll begin with a demonstration of typesetting mathematics with Markdown, and demonstrate basic text formatting at the same time. In the expressions below, the number of filters is Nf, the flux associated with the ith filter is Fi, and the weight, wi, is defined as
wi ≡ σF, i−2,
where σF, i
is the uncertainty in the flux associated with the ith filter. Assume that all sums
range from i = 1 to i = Nf
and use the summation convention on repeated indices. Note that we
strike things out like this, italicize things like
this or like this, and we can make things bold
like this or like this.
Unfortunately, –> and => do not turn into arrows automatically, but you can make arrows like this → and ⇒. You can also implement a Pandoc filter to add features that are not built-in. So, it would be possible to make –> turn into → and introduce new features, such as Graphviz graph rendering. For examples of such filters, check out this list (or keep reading this document).
Here’s a horizontal line / separator:
There are many ways of creating tables. This is an example of the pipe table creation syntax…
| Label | Description |
|---|---|
meanflx |
$${\langle F\rangle=\frac{1}{N_f}\sum_i F_i}$$ |
wmeanflx |
$${\langle F\rangle_w=\frac{F_i w_i}{\sum_i w_i}}$$ |
rmsflx |
$${\sqrt{\langle F^2\rangle_w} = \sqrt{\frac{F_i^2 w_i}{\sum_i}}}$$ |
Here’s one more example, with a table caption:
| Right | Left | Center |
|---|---|---|
| 12 | 12 | 12 |
| 123 | 123 | 123 |
| 1 | 1 | 1 |
Refer to the documentation to learn more about the other types of tables.
Normally, adjacent lines are combined together, so a set of short
formatted lines, such as an address or verse, becomes jumbled. To
overcome this, place | at the beginning of each line,
followed by a space. This preserves the formatting:
Note the indentation on the final two lines above.
Images are inserted using the following syntax. Captions are optional.
The syntax for block quotes is extremely simple:
You can write a block quote by putting a single ‘
>’ at the beginning of a block of text or by placing the ‘>’ at the beginning of each line of the quoted block, similar to the way e-mail readers handle quoted messages.
# symbol in enumerated
lists.This is Example (1).
This is Example (2).
Now we discuss something for a while and introduce the third example…
You can refer to an example by its label. For instance Example (2).
You can include blocks of pre-formatted text, like this. If the text is source code, you can tell Pandoc to perform syntax highlighting. This is graphviz.py:
#!/usr/bin/env python
"""
Pandoc filter to process code blocks with class "graph" into
graphviz-generated images.
Requires pygraphviz, pandocfilters
"""
import os
import sys
import pygraphviz
from pandocfilters import toJSONFilter, Para, Image, get_filename4code
from pandocfilters import get_caption, get_extension, get_value
def document_name():
if "PANDOC_INPUT_FILE" in os.environ:
return os.environ["PANDOC_INPUT_FILE"]
else:
return "graph"
def graphviz(key, value, format, _):
if key == 'CodeBlock':
[[ident, classes, keyvals], code] = value
if "graph" in classes:
caption, typef, keyvals = get_caption(keyvals)
prog, keyvals = get_value(keyvals, u"prog", u"dot")
filetype = get_extension(format, "svg", html="svg", latex="pdf")
dest = get_filename4code(document_name(), code, filetype)
if not os.path.isfile(dest):
g = pygraphviz.AGraph(string=code)
g.layout()
g.draw(dest, prog=prog)
sys.stderr.write('Created image ' + dest + '\n')
image = Image([ident, classes, keyvals],
caption,
[dest, typef])
return Para([image])
if __name__ == "__main__":
toJSONFilter(graphviz)Here’s another example using a different programming language (and a different method of specifying the pre-formatted text block).
This is an example of a feature that was added using a Pandoc filter (refer to the Python code above). Plain Pandoc does not automatically render Graphviz syntax to inline images, but the short Python program above adds this feature.
digraph G {
bgcolor="#ffffff00"
subgraph cluster_0 {
style="filled, rounded";
color="#E6EAF2"
node [style=filled,color=white];
a0 -> a1 -> a2 -> a3;
a3 -> a1 [label = " -10" color=red fontcolor=red];
label = "System A";
}
subgraph cluster_1 {
node [style=filled color="#E6EAF2"];
b0 -> b1 -> b2 -> b3;
b0 -> b2 [label = " +12" color=green fontcolor=green];
label = "System B";
style="dashed, rounded"
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
a3 -> end;
b3 -> end;
start [label="load" shape=folder];
end [label="store" shape=box3d];
}
A diagram showing how this document is compiled, using a filter:
digraph G {
node [shape=box]
bgcolor="#ffffff00"
input [label = "example.md"];
markdown_parser [label = "Pandoc Markdown parser"];
filter [label = "graphviz.py filter"];
html_writer [label = "Pandoc HTML writer"];
output [label = "example.html"];
input -> markdown_parser;
markdown_parser -> filter [label = " AST"];
filter -> html_writer [label = " AST"];
html_writer -> output;
}
digraph G {
bgcolor="#ffffff00";
node [shape=box];
rankdir=LR;
ranksep=0.5;
a -> b -> c -> d -> e
}
digraph G {
bgcolor="#ffffff00"
node [shape=box]
rankdir=LR;
ranksep=0.5;
a -> b -> c -> d -> e
e -> d -> c -> b -> a
}
digraph G {
bgcolor="#ffffff00"
node [shape=circle, width=0.5, fixedsize=true];
0 -> 1
0 -> 2
1 -> 3
1 -> 5
2 -> 4
2 -> 6
3 -> 7
3 -> 9
5 -> 11
5 -> 13
4 -> 8
4 -> 10
6 -> 12
6 -> 14
}
Note how this is rendered with prog=neato, instead of
prog=dot, which is the default. Other options are
twopi, circo, fdp, and
nop:
graph ER {
bgcolor="#ffffff00"
A -- 1
A -- 2
A -- 3
A -- 4
A -- 5
}
graph ER {
bgcolor="#ffffff00"
A -- B -- C -- D -- E -- F -- G -- A
}
graph ER {
bgcolor="#ffffff00";
node [shape=circle, width=0.5, fixedsize=true];
edge [len=2]
A -- B
A -- C
A -- D
A -- E
A -- F
B -- C
B -- D
B -- E
B -- F
C -- D
C -- E
C -- F
D -- E
D -- F
E -- F
}
And one more, just because these are so fun…
digraph G {
bgcolor="#ffffff00"
splines=line;
rankdir=LR;
nodesep=0.33;
ranksep=1.33;
edge [arrowsize=0.4, fontsize=8, arrowhead="open", style="setlinewidth(0.5)"];
node [shape=circle, fontsize=9, width=0.36, fixedsize=true];
node_0_0 [label=" ", style="filled", fillcolor="#ff000026"];
node_0_1 [label=" ", style="filled", fillcolor="#ff000026"];
node_0_2 [label=" ", style="filled", fillcolor="#ff000026"];
node_0_3 [label=" ", style="filled", fillcolor="#ff000026"];
node_0_4 [label=" ", style="filled", fillcolor="#ff000026"];
node_1_0 [label=" ", style="filled", fillcolor="#0000ee26"];
node_1_1 [label=" ", style="filled", fillcolor="#0000ee26"];
node_1_2 [label=" ", style="filled", fillcolor="#ff000026"];
node_2_0 [label="f(x)"];
node_0_0 -> node_1_0 [color="#ff000026"];
node_0_0 -> node_1_1 [color="#0000ee26"];
node_0_0 -> node_1_2 [color="#0000ee26"];
node_0_1 -> node_1_0 [color="#ff000026"];
node_0_1 -> node_1_1 [color="#ff000026"];
node_0_1 -> node_1_2 [color="#0000ee26"];
node_0_2 -> node_1_0 [color="#0000ee26"];
node_0_2 -> node_1_1 [color="#ff000026"];
node_0_2 -> node_1_2 [color="#0000ee26"];
node_0_3 -> node_1_0 [color="#0000ee26"];
node_0_3 -> node_1_1 [color="#0000ee26"];
node_0_3 -> node_1_2 [color="#ff000026"];
node_0_4 -> node_1_0 [color="#0000ee26"];
node_0_4 -> node_1_1 [color="#0000ee26"];
node_0_4 -> node_1_2 [color="#ff000026"];
node_1_0 -> node_2_0 [color="#0000eecb"];
node_1_1 -> node_2_0 [color="#0000eecb"];
node_1_2 -> node_2_0 [color="#0000ee8a"];
}
To convert1 this Markdown document to HTML, I used the following command:
# BTW, this is a Bash syntax highlighting example.
$ pandoc example.md -s --smart --mathjax \
--css nrstyle.css \
--highlight-style pygments \
--columns=200 \
--filter graphviz.py \
-o example.htmlexample.md: the input file-s: create a stand-alone document
(rather than a document fragment that lacks a header).--smart: automatically replace
--, ---, and ... with –, —, and …
and handle quotation marks properly.--mathjax: use the MathJax library for typesetting math
in HTML documents.--css nrstyle.css: Use the nrstyle.css
stylesheet in the HTML output document.--highlight-style pygments: Turn on
syntax highlighting and use the pygments color scheme.--columns=200: set the line length to
200. This makes the tables display properly.--filter graphviz.py: Pass Pandoc’s
abstract syntax tree through the filter program graphviz.py
before rendering the output document.-o example.html: Specify the name and
type of the output file. The format is inferred from the suffix (file
extension).example.mdThe input file
-sCreate a stand-alone document (rather than a document fragment that lacks a header).
--smartAutomatically replace --, ---, and
... with –, —, and … and handle quotation marks
properly.
--mathjaxUse the MathJax library for typesetting math in HTML documents.
--css nrstyle.cssUse the nrstyle.css stylesheet in the HTML output document.
--highlight-style pygmentsTurn on syntax highlighting and use the pygments color scheme.
--columns=200set the line length to 200. This makes the tables display properly.
--filter graphviz.pyPass Pandoc’s abstract syntax tree through the filter program
graphviz.py before rendering the output document.
-o example.htmlSpecify the name and type of the output file. The format is inferred from the suffix (file extension).
This is a footnote.↩︎