Test

• First level header
  • Second level header Hello
  • Hello
• Block-level Elements - Main Structural Elements
  • Horizontal Rules

<img src="/img/research/len-fig1.pdf" alt="Shadowed Smiley face" height="180">

hello

what else what else what what

​ html <a href="#">Hello world</a> ​``

hello

This `is not a code` span!

First level header

Second level header Hello

Hello

Here comes some code.

~~~~~~~
code with tildes
~~~~~~~~

def what?
  42
end

• kram
• down
• now

1. kram
2. down
3. now

1. First ordered list item
2. Another item
   • Unordered sub-list.
   • and

Scratch this.

hello

kramdown example code

Example code converted to HTML

Block-level Elements - Main Structural Elements

Horizontal Rules

Lists

1. This is a list item
2. And another item
3. And the third one with additional text {kdexample}

Definition Lists

term

definition

another definition

another term

and another term

and a definition for the term and second

If you insert a blank line before a definition (note: there must only be one blank line between the terms and the first definition), the definition will be wrapped in a paragraph:

{kdexample::} term

: definition

definition {kdexample}

Each term can be styled using span-level elements and each definition is parsed as block-level elements, i.e. you can use any block-level in a definition. Just use the same indent for the lines following the definition line:

{kdexample::} This is a term

: This will be a para

a blockquote

# A header {kdexample}

Tables

{kdlink: {oid: tables, part: “tables”}}

kramdown supports a syntax for creating simple tables. A line starting with a pipe character (|) starts a table row. However, if the pipe characters is immediately followed by a dash (-), a separator line is created. Separator lines are used to split the table header from the table body (and optionally align the table columns) and to split the table body into multiple parts. If the pipe character is followed by an equal sign (=), the tables rows below it are part of the table footer.

{kdexample::} | A simple | table | | with multiple | lines| {kdexample}

{kdexample::} | Header1 | Header2 | Header3 | |:——–|:——-:|——–:| | cell1 | cell2 | cell3 | | cell4 | cell5 | cell6 | |—- | cell1 | cell2 | cell3 | | cell4 | cell5 | cell6 | |===== | Foot1 | Foot2 | Foot3

{kdexample}

HTML elements

{kdlink: {oid: html-blocks, part: “HTML blocks”}}

kramdown allows you to use block-level HTML tags (div, p, pre, …) to markup whole blocks of text – just start a line with a block-level HTML tag. kramdown syntax is normally not processed inside an HTML tag but this can be changed with the parse_block_html option. If this options is set to true, then the content of a block-level HTML tag is parsed by kramdown either as block level or span-level text, depending on the tag:

{kdexample::}

This can contain only span level elements.

{kdexample}

Block Attributes

{kdlink: {oid: block-ials, part: “block IALs”}} {kdlink: {oid: attribute-list-definitions, part: “ALDs”}}

You can assign any attribute to a block-level element. Just directly follow the block with a block inline attribute list (or short: block IAL). A block IAL consists of a left curly brace, followed by a colon, the attribute definitions and a right curly brace. Here is a simple example which sets the title attribute of a block quote:

{kdexample::} > A nice blockquote

{kdexample}

As one often wants to set one or more CSS classes on an element, there is an easy shortcut:

{kdexample::} > A nice blockquote

{kdexample}

A shortcut for setting the ID is also provided. Just prefix the ID with a hash symbol:

{kdexample::} > A nice blockquote

{kdexample}

Sometimes one wants to use the same attributes for many elements. kramdown allows you to define the attributes in one place with an attribute list definition (or short: ALD) and just reference this definition in a block IAL. An ALD has the same structure as a block IAL but the colon has to be replace with a colon, the reference name and another colon. By just using the reference name as-is in a block IAL, one can include the attributes of the referenced ALD:

{kdexample::}

paragraph

{kdexample}

The order in a block IAL or ALD is important because later defined attributes overwrite (with the exception of the shortcut for CSS classes) prior defined attributes:

{kdexample::}

paragraph

{kdexample}

Extensions

{kdlink: {oid: extensions, part: “extensions”}}

kramdown provides some less used functionality through a common syntax. This will allow the easy addition of other extensions if need arises. Currently, there are extensions for ignoring text (i.e. treating text as comment), for inserting arbitrary text as-is into the output and for setting kramdown options.

Here is an example that shows how to insert comments into text:

{kdexample::} This is a paragraph … paragraph continues here.

Extensions can also be used inline **see**! {kdexample}

As one can see from the above example, the syntax for extensions is nearly identical to that of ALDs. However, there is no trailing colon after the extension name and the extension end tag needs a slash between the colon and the extension name. One can also use the short form of the end tag, i.e. {:/}. Attribute definitions can be specified on the start tag by separating them with a space from the extension name. Also, if the extension does not have a body, there needs to be a slash right before the closing brace:

{kdexample::}

Header without id

{kdexample}

Span-Level Elements - Text Modifiers

Emphasis

{kdlink: {oid: emphasis, part: “emphasis”}}

Emphasis can be added to text by surrounding the text with either asterisks or underscores:

{kdexample::} This is emphasized, this too! {kdexample}

Strong emphasis can be done by doubling the delimiters:

{kdexample::} This is strong, this too! {kdexample}

The form with the asterisks can also be used to markup parts of words:

{kdexample::} This works as expected! {kdexample}

Links and Images

{kdlink: {oid: links-and-images, part: “links and images”}}

A simple link can be created by surrounding the text with square brackets and the link URL with parentheses:

{kdexample::} A link to the kramdown homepage. {kdexample}

You can also add title information to the link:

{kdexample::} A link to the homepage. {kdexample}

There is another way to create links which does not interrupt the text flow. The URL and title are defined using a reference name and this reference name is then used in square brackets instead of the link URL:

{kdexample::} A link to the homepage.

{kdexample}

If the link text itself is the reference name, the second set of square brackets can be omitted:

{kdexample::} A link to the kramdown hp.

{kdexample}

Images can be created in a similar way: just use an exclamation mark before the square brackets. The link text will become the alternative text of the image and the link URL specifies the image source:

{kdexample::} An image: {kdexample}

Inline Code

{kdlink: {oid: code-spans, part: “code spans”}}

Text phrases can be easily marked up as code by surrounding them with backticks:

{kdexample::} Use Kramdown::Document.new(text).to_html to convert the text in kramdown syntax to HTML. {kdexample}

If you want to use literal backticks in your code, just use two or more backticks as delimiters. The space right after the beginning delimiter and the one right before the closing delimiter are ignore:

{kdexample::} Use backticks to markup code, e.g. `code`. {kdexample}

Footnotes

{kdlink: {oid: footnotes, part: “footnotes”}}

Footnotes can easily be used in kramdown. Just set a footnote marker (consists of square brackets with a caret and the footnote name inside) in the text and somewhere else the footnote definition (which basically looks like a reference link definition):

{kdexample::} This is a text with a footnote¹.

{kdexample}

The footnote definition can contain any block-level element, all lines following a footnote definition indented with four spaces or one tab belong to the definition:

{kdexample::} This is a text with a footnote².

As can be seen above the footnote name is only used for the anchors and the numbering is done automatically in document order. Repeated footnote markers will link to the same footnote definition.

Abbreviations

{kdlink: {oid: abbreviations, part: “abbreviations”}}

Abbreviations will work out of the box once you add an abbreviation definition. So you can just write the text and add the definitions later on.

{kdexample::} This is an HTML example.

{kdexample}

HTML Elements

{kdlink: {oid: html-spans, part: “HTML spans”}}

HTML is not only supported on the block-level but also on the span-level:

{kdexample::} This is written in red. {kdexample}

Inline Attributes

{kdlink: {oid: span-ials, part: “span IALs”}}

As with a block-level element you can assign any attribute to a span-level elements using a span inline attribute list (or short: span IAL). A span IAL has the same syntax as a block IAL and must immediately follow the span-level element:

{kdexample::} This is red. {kdexample}

: definition : definition {kdexample}