This is some text in the `layer1` div.
This is some text in the `layers` div.
--- title: Syntax in_menu: true sort_info: 10 --- name:sidebar
` elements!
Header rows, footer rows and normal rows are all done using these table rows. Table cells can only
contain a single line of text, no multi-line text is supported. The text of a table cell is parsed
as span-level elements.
Here are some example table rows:
| First cell|Second cell|Third cell
| First | Second | Third |
First | Second | | Fourth |
* *Separator lines* are used to split the table body into multiple body parts.
A separator line is any line that contains only pipes, dashes, pluses, colons and spaces and which
contains at least one dash and one pipe character. The pipe and plus characters can be used to
visually separate columns although this is not needed. Multiple separator lines after another are
treated as one separator line.
Here are some example separator lines:
|----+----|
+----|----+
|---------|
|-
| :-----: |
-|-
* The first separator line after at least one table row is treated specially, namely as *header
separator line*. It is used to demarcate header rows from normal table rows and/or to set column
alignments. All table rows above the header separator line are considered to be header rows.
The header separator line can be specially formatted to contain column alignment definitions: An
alignment definition consists of an optional space followed by an optional colon, one or more
dashes, an optional colon and another optional space. The colons of an alignment definition are
used to set the alignment of a column: if there are no colons, the column uses the default
alignment, if there is a colon only before the dashes, the column is left aligned, if there are
colons before and after the dashes, the column is center aligned and if there is only a colon
after the dashes, the column is right aligned. Each alignment definition sets the alignment for
one column, the first alignment definition for the first column, the second alignment definition
for the second column and so on.
Here are some example header separator lines with alignment definitions:
|---+---+---|
+ :-: |:------| ---:|
| :-: :- -: -
:-: | :-
* A *footer separator line* is used to demarcate footer rows from normal table rows. All table rows
below the footer separator line are considered to be footer rows.
A footer separator line is like a normal separator line except that dashes are replaced by equal
signs. A footer separator line may only appear once in a table. If multiple footer separator lines
are used in one table, only the last is treated as footer separator line, all others are treated
as normal separator lines. Normal separator lines that are used after the footer separator line
are ignored.
Here are some example footer separator lines:
|====+====|
+====|====+
|=========|
|=
Trailing spaces or tabs are ignored in all cases. To simplify table creation and maintenance,
header, footer and normal separator lines need not specify the same number of columns as table rows;
even `|-` and `|=` are a valid separators.
Given the above components, a table is specified by
* an optional separator line,
* optionally followed by zero, one or more table rows followed by a header separator line,
* one or more table rows, optionally interspersed with separator lines,
* optionally followed by a footer separator line and zero, one or more table rows and
* an optional trailing separator line.
Also note
* that the first line of a table must not have more than three spaces of indentation before the
first non-space character,
* that each line of a table needs to have at least one not escaped pipe character so that kramdown
recognizes it as a line belonging to the table and
* that tables have to start and end on [block boundaries](#block-boundaries)!
> The table syntax differs from the one used in [PHP Markdown Extra] as follows:
>
> * kramdown tables do not need to have a table header.
> * kramdown tables can be structured using separator lines.
> * kramdown tables can contain a table footer.
> * kramdown tables need to be separated from other block-level elements.
{: .markdown-difference}
Here is an example for a kramdown table with a table header row, two table bodies and a table footer
row:
|-----------------+------------+-----------------+----------------|
| Default aligned |Left aligned| Center aligned | Right aligned |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell | fourth cell |
| Second line |foo | **strong** | baz |
| Third line |quux | baz | bar |
|-----------------+------------+-----------------+----------------|
| Second body | | | |
| 2 line | | | |
|=================+============+=================+================|
| Footer row | | | |
|-----------------+------------+-----------------+----------------|
The above example table is rather time-consuming to create without the help of an ASCII table
editor. However, the table syntax is flexible and the above table could also be written like this:
|---
| Default aligned | Left aligned | Center aligned | Right aligned
|-|:-|:-:|-:
| First body part | Second cell | Third cell | fourth cell
| Second line |foo | **strong** | baz
| Third line |quux | baz | bar
|---
| Second body
| 2 line
|===
| Footer row
## Horizontal Rules
A horizontal rule for visually separating content is created by using three or more asterisks,
dashes or underscores (these may not be mixed on a line), optionally separated by spaces or tabs, on
an otherwise blank line. The first asterisk, dash or underscore may optionally be indented up to
three spaces. The following examples show different possibilities to create a horizontal rule:
* * *
---
_ _ _ _
---------------
## Math Blocks
> This syntax feature is not part of the original Markdown syntax. The idea comes from the [Maruku]
> and [Pandoc] packages.
{: .markdown-difference}
kramdown has built-in support for block and span-level mathematics written in LaTeX.
A math block needs to start and end on [block boundaries](#block-boundaries). It is started using
two dollar signs, optionally indented up to three spaces. The math block continues until the next
two dollar signs (which may be on the same line or on one of the next lines) that appear at the end
of a line, i.e. they may only be followed by whitespace characters. The content of a math block has
to be valid LaTeX math. It is always wrapped inside a `\begin{displaymath}...\end{displaymath}`
enviroment except if it begins with a `\begin` statement.
The following kramdown fragment
$$
\begin{align*}
& \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
& (x_1, \ldots, x_n) \left( \begin{array}{ccc}
\phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\
\vdots & \ddots & \vdots \\
\phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
\end{array} \right)
\left( \begin{array}{c}
y_1 \\
\vdots \\
y_n
\end{array} \right)
\end{align*}
$$
renders (using Javascript library [MathJax](http://www.mathjax.org/)) as
$$
\begin{align*}
& \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
= \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
& (x_1, \ldots, x_n) \left( \begin{array}{ccc}
\phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\
\vdots & \ddots & \vdots \\
\phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
\end{array} \right)
\left( \begin{array}{c}
y_1 \\
\vdots \\
y_n
\end{array} \right)
\end{align*}
$$
Using inline math is also easy: just surround your math content with two dollar signs, like with a
math block. If you don't want to start an inline math statement, just escape the dollar signs and
they will be treated as simple dollar signs.
> **Note** that LaTeX code that uses the pipe symbol `|` in inline math statements may lead to a
> line being recognized as a table line. This problem can be avoided by using the `\vert` command
> instead of `|`!
{:.information}
If you have a paragraph that looks like a math block but should actually be a paragraph with just an
inline math statement, you need to escape the first dollar sign:
The following is a math block:
$$ 5 + 5 $$
But next comes a paragraph with an inline math statement:
\$$ 5 + 5 $$
If you don't even want the inline math statement, escape the first two dollar signs:
\$\$ 5 + 5 $$
## HTML Blocks
> The original Markdown syntax specifies that an HTML block must start at the left margin, i.e. no
> indentation is allowed. Also, the HTML block has to be surrounded by blank lines. Both
> restrictions are lifted for kramdown documents. Additionally, the original syntax does not allow
> you to use Markdown syntax in HTML blocks which is allowed with kramdown.
{: .markdown-difference}
An HTML block is potentially started if a line is encountered that begins with a non-span-level HTML
tag or a general XML tag (opening or closing) which may be indented up to three spaces.
The following HTML tags count as span-level HTML tags and *won't* start an HTML block if found at
the beginning of an HTML block line:
a abbr acronym b big bdo br button cite code del dfn em i img input
ins kbd label option q rb rbc rp rt rtc ruby samp select small span
strong sub sup textarea tt var
Further parsing of a found start tag depends on the tag and in which of three possible ways its
content is parsed:
* Parse as raw HTML block: If the HTML/XML tag content should be handled as raw HTML, then only
HTML/XML tags are parsed from this point onwards and text is handled as raw, unparsed text until
the matching end tag is found or until the end of the document. Each found tag will be parsed as
raw HTML again. However, if a tag has a `markdown` attribute, this attribute controls parsing of
this one tag (see below).
Note that the parser basically supports only correct XHTML! However, there are some exceptions.
For example, attributes without values (i.e. boolean attributes) are also supported and elements
without content like `
` can be written as `
`. If an invalid closing tag is found, it is
ignored.
* Parse as block-level elements: If the HTML/XML tag content should be parsed as text containing
block-level elements, the remaining text on the line will be parsed by the block-level parser as
if it appears on a separate line (**Caution**: This also means that if the line consists of the
start tag, text and the end tag, the end tag will not be found!). All following lines are parsed
as block-level elements until an HTML block line with the matching end tag is found or until the
end of the document.
* Parse as span-level elements: If the HTML/XML tag content should be parsed as text containing span
level elements, then all text until the *next* matching end tag or until the end of the document
will be the content of the tag and will later be parsed by the span-level parser. This also means
that if the matching end tag is inside what appears to be a code span, it is still used!
If there is text after an end tag, it will be parsed as if it appears on a separate line except when
inside a raw HTML block.
Also, if an invalid closing tag is found, it is ignored.
Note that all HTML tag and attribute names are converted to lowercase!
By default, kramdown parses all block HTML tags and all XML tags as raw HTML blocks. However, this
can be configured with the `parse_block_html`. If this is set to `true`, then syntax parsing in HTML
blocks is globally enabled. It is also possible to enable/disable syntax parsing on a tag per tag
basis using the `markdown` attribute:
* If an HTML tag has an attribute `markdown="0"`, then the tag is parsed as raw HTML block.
* If an HTML tag has an attribute `markdown="1"`, then the default mechanism for parsing syntax in
this tag is used.
* If an HTML tag has an attribute `markdown="block"`, then the content of the tag is parsed as block
level elements.
* If an HTML tag has an attribute `markdown="span"`, then the content of the tag is parsed as span
level elements.
The following list shows which HTML tags are parsed in which mode by default when `markdown="1"` is
applied or `parse_block_html` is `true`:
Parse as raw HTML
:
script style math option textarea pre code kbd samp var
Also, all general XML tags are parsed as raw HTML blocks.
Parse as block-level elements
:
applet button blockquote body colgroup dd div dl fieldset form iframe li
map noscript object ol table tbody thead tfoot tr td ul
Parse as span-level elements
:
a abbr acronym address b bdo big cite caption code del dfn dt em
h1 h2 h3 h4 h5 h6 i ins kbd label legend optgroup p pre q rb rbc
rp rt rtc ruby samp select small span strong sub sup th tt var
> Remember that all span-level HTML tags like `a` or `b` do not start a HTML block! However, the
> above lists also include span-level HTML tags in the case the `markdown` attribute is used on a
> tag inside a raw HTML block.
Here is a simple example input and its HTML output with `parse_block_html` set to `false`:
This is a para.
Something in here.
Other para.
^
This is a para.
Something in here.
Other para.
As one can see the content of the `div` tag will be parsed as raw HTML block and left alone.
However, if the `markdown="1"` attribute was used on the `div` tag, the content would be parsed as
block-level elements and therefore converted to a paragraph.
You can also use several HTML tags at once:
This is some text in the `layer1` div.
This is some text in the `layers` div.
This is a para outside the HTML block.
However, remember that if the content of a tag is parsed as block-level elements, the content that
appears after a start/end tag but on the same line, is processed as if it appears on a new line:
This is the first part of a para,
which is continued here.
This works without problems because it is parsed as
span-level elements
The end tag is not found because
this line is parsed as a paragraph
Since setting `parse_block_html` to `true` can lead to some not wanted behaviour, it is generally
better to selectively enable or disable block/span-level elements parsing by using the `markdown`
attribute!
Unclosed block-level HTML tags are correctly closed at the end of the document to ensure correct
nesting and invalidly used end tags are removed from the output:
This is a para.
Another para.
^
This is a para.
Another para.
The parsing of processing instructions and XML comments is also supported. The content of both, PIs
and XML comments, may span multiple lines. The start of a PI/XML comment may only appear at the
beginning of a line, optionally indented up to three spaces. If there is text after the end of a PI
or XML comment, it will be parsed as if it appears on a separate line. kramdown syntax in PIs/XML
comments is not processed:
This is a para.
a processing `instruction`
spanning multiple lines
?> First part of para,
continues here.
# Text Markup
These elements are all span-level elements and used inside block-level elements to markup text
fragments. For example, one can easily create links or apply emphasis to certain text parts.
Note that empty span-level elements are not converted to empty HTML tags but are copied as-is to the
output.
## Links and Images
Three types of links are supported: automatic links, inline links and reference links.
### Automatic Links
This is the easiest one to create: Just surround a web address or an email address with angle
brackets and the address will be turned into a proper link. The address will be used as link target
and as link text. For example:
Information can be found on the homepage.
You can also mail me:
It is not possible to specify a different link text using automatic links -- use the other link
types for this!
### Inline Links
As the wording suggests, inline links provide all information inline in the text flow. Reference
style links only provide the link text in the text flow and everything else is defined
elsewhere. This also allows you to reuse link definitions.
An inline style link can be created by surrounding the link text which must contain at least one
character with square brackets, followed immediately by the link URL (and an optional title in
single or double quotes preceded by at least one space) in normal parentheses. For example:
This is [a link](http://rubyforge.org) to a page.
A [link](../test "local URI") can also have a title.
And [spaces](link with spaces.html)!
Notes:
* The link text is treated like normal span-level text and therefore is parsed and converted.
However, if you use square brackets within the link text, you have to either properly nest them or
to escape them. It is not possible to create nested links!
* The link URL must not contain single or double quotes and it has to contain properly nested
parentheses if no title is specified, or the link URL must be contained in angle brackets
(incorrectly nested parentheses are allowed).
* The link title may not contain its delimiters and may not be empty.
### Reference Links
To create a reference style link, you need to surround the link text with square brackets (as with
inline links), followed by optional spaces/tabs/line breaks and then optionally followed with
another set of square brackets with the link identifier in them. A link identifier may not contain a
closing bracket and, when specified in a link definition, newline characters; it is also not case
sensitive, line breaks and tabs are converted to spaces and multiple spaces are compressed into one.
For example:
This is a [reference style link][linkid] to a page. And [this]
[linkid] is also a link. As is [this][] and [THIS].
If you don't specify a link identifier (i.e. only use empty square brackets) or completely omit the
second pair of square brackets, the link text is converted to a valid link identifier by removing
all invalid characters and inserting spaces for line breaks. If there is a link definition found for
the link identifier, a link will be created. Otherwise the text is not converted to a link.
### Link Definitions
The link definition can be put anywhere in the document. It does not appear in the output. A link
definition looks like this:
[linkid]: http://www.example.com/ "Optional Title"
> Link definitions are, despite being described here, non-content block-level elements.
{: .information}
The link definition has the following structure:
* The link identifier in square brackets, optionally indented up to three spaces,
* then a colon and one or more spaces/tabs,
* then the link URL which must not contain any single or double quotes and which must contain at
least one non-space character, or a left angle bracket, the link URL and a right angle bracket,
* then optionally the title in single or double quotes, separated from the link URL by one or more
spaces or on the next line by itself indented any number of spaces/tabs.
> The original Markdown syntax also allowed the title to be specified in parenthesis. This is not
> allowed for consistency with the inline title.
{: .markdown-difference}
If you have some text that looks like a link definition but should really be a link and some text,
you can escape the colon after the link identifier:
The next paragraph contains a link and some text.
[Room 100]\: There you should find everything you need!
[Room 100]: link_to_room_100.html
### Images
Images can be specified via a syntax that is similar to the one used by links. The difference is
that you have to use an exclamation mark before the first square bracket and that the link text of a
normal link, which may also be the empty string in case of image links, becomes the alternative text
of the image link. As with normal links, image links can be written inline or reference style. For
example:
Here comes a ![smiley](../images/smiley.png)! And here
![too](../images/other.png 'Title text'). Or ![here].
With empty alt text ![](see.jpg)
The link definition for images is exactly the same as the link definition for normal links.
## Emphasis
kramdown supports two types of emphasis: light and strong emphasis. Text parts that are surrounded
with single asterisks `*` or underscores `_` are treated as text with light emphasis, text parts
surrounded with two asterisks or underscores are treated as text with strong emphasis. Surrounded
means that the starting delimiter must not be followed by a space and that the stopping delimiter
must not be preceded by a space.
Here is an example for text with light and strong emphasis:
*some text*
_some text_
**some text**
__some text__
The asterisk form is also allowed within a single word:
This is un*believe*able! This d_oe_s not work!
Text can be marked up with both light and strong emphasis, possibly using different delimiters.
However, it is not possible to nest strong within strong or light within light emphasized text:
This is a ***text with light and strong emphasis***.
This **is _emphasized_ as well**.
This *does _not_ work*.
This **does __not__ work either**.
If one or two asterisks or underscores are surrounded by spaces, they are treated literally. If you
want to force the literal meaning of an asterisk or an underscore you can backslash-escape it:
This is a * literal asterisk.
These are ** two literal asterisk.
As \*are\* these!
## Code Spans
This is the span-level equivalent of the [code block](#code-blocks) element. You can markup a text
part as code span by surrounding it with backticks `` ` ``. For example:
Use `` tags for this.
Note that all special characters in a code span are treated correctly. For example, when a code span
is converted to HTML, the characters `<`, `>` and `&` are substituted by their respective HTML
counterparts.
To include a literal backtick in a code span, you need to use two or more backticks as delimiters.
You can insert one optional space after the starting and before the ending delimiter (these spaces
are not used in the output). For example:
Here is a literal `` ` `` backtick.
And here is `` `some` `` text (note the two spaces so that one is left
in the output!).
A single backtick surrounded by spaces is treated as literal backtick. If you want to force the
literal meaning of a backtick you can backslash-escape it:
This is a ` literal backtick.
As \`are\` these!
As with [code blocks](#language-of-code-blocks) you can set the language of a code span by using an
[IAL](#inline-attribute-lists):
This is a Ruby code fragment `x = Class.new`{:.language-ruby}
## HTML Spans
HTML tags cannot only be used on the block-level but also on the span-level. Span-level HTML tags
can only be used inside one block-level element, it is not possible to use a start tag in one block
level element and the end tag in another. Note that only correct XHTML is supported! This means that
you have to use, for example, `
` instead of `
` (although kramdown tries to fix such errors
if possible).
By default, kramdown parses kramdown syntax inside span HTML tags. However, this behaviour can be
configured with the `parse_span_html` option. If this is set to `true`, then syntax parsing in HTML
spans is enabled, if it is set to `false`, parsing is disabled. It is also possible to
enable/disable syntax parsing on a tag per tag basis using the `markdown` attribute:
* If an HTML tag has an attribute `markdown="0"`, then no parsing (except parsing of HTML span tags)
is done inside that HTML tag.
* If an HTML tag has an attribute `markdown="1"`, then the content of the tag is parsed as span
level elements.
* If an HTML tag has an attribute `markdown="block"`, then a warning is issued because HTML spans
cannot contain block-level elements and the attribute is ignored.
* If an HTML tag has an attribute `markdown="span"`, then the content of the tag is parsed as span
level elements.
The content of a span-level HTML tag is normally parsed as span-level elements. Note, however, that
some tags like `