Markdig Extensions

Introduction

This memo is a continuation of Markdig.

Markdig provides built-in extensions, and you can enable the relevant extension by calling an extension method when creating the pipeline. For example, to enable Pipe Table, you can write:

var pipeline = new MarkdownPipelineBuilder()
    .UsePipeTables(); // Enable Pipe Table
    .Build();

var html = Markdown.ToHtml(markdown, pipeline);

An extension method UseAdvancedExtensions() is also available, which enables almost all extensions. (Emoji, SoftLine as HardLine, Bootstrap, YAML Front Matter, JiraLinks, and SmartyPants are not enabled) You can check the content of each extension from Documentation Tests/Specs.

Below, we introduce the Markdown syntax and conversion results for each extension.

Pipe Table

Generates tables.
Even if you don't enclose the left and right with |, it will nicely complete and generate a table.
For those who want to write simply.

a  | b
-- | --
0  | 1 | 2
3  | 4
5  |

Grid Table

A type of table that strictly describes rows and columns.
You can create merged cells. For those who need to write complex tables.

+---+---+---+
| AAAAA | B |
+---+---+ B +
| D | E | B |
+ D +---+---+
| D | CCCCC |
+---+---+---+

EmphasisExtra

Strikethrough, subscript, and superscript, etc.

The following text ~~is deleted~~

H~2~O is a liquid. 2^10^ is 1024

One quintillionth can be expressed as 10^-18^

Daggers^†^ and double-daggers^‡^ can be used to denote notes.

++Inserted text++

==Marked text==

The following text is deleted

H₂O is a liquid. 2¹⁰ is 1024

One quintillionth can be expressed as 10^-18

Daggers^† and double-daggers^‡ can be used to denote notes.

Inserted text

Marked text

Generic Attributes

You can specify attributes to be attached to HTML elements within { }.

• Values starting with # become IDs.
• Values starting with . become classes.
• Other than the above, by describing them in key=value format, they become attributes as is.

When specified inline

Specify it immediately after the inline element, without a line break.

[This is a link](http://google.com){#a-link .myclass data-lang=fr data-value="This is a value"}

Converted to the following HTML:

<p><a href="http://google.com" id="a-link" class="myclass" data-lang="fr" data-value="This is a value">This is a link</a></p>

When specified in a block

Specify it immediately before the block.

{#fenced-id .fenced-class}
~~~
This is a fenced with attached attributes
~~~

Converted to the following HTML:

<pre><code id="fenced-id" class="fenced-class">This is a fenced with attached attributes
</code></pre>

Definition lists

Generates definition lists.

• <dl> ... Definition List
• <dt> ... Definition Term
• <dd> ... Definition Description

In the example below, Term 1, Term 2, and Term 3 are converted to <dt> tags, and everything after : is converted to <dd> tags.

Term 1
:   This is a definition item
    With a paragraph
    > This is a block quote

    - This is a list
    - with an item2

    ```java
    Test


    ```

    And a last line
:   This ia another definition item

Term 2
Term 3 *with some inline*
:   This is another definition for term2

Term 1

This is a definition item With a paragraph

This is a block quote

• This is a list
• with an item2

Test

And a last line

This ia another definition item

Term 2

Term 3 with some inline

This is another definition for term2

Footnotes

Footnote content is added to the end of the document (at the very end of the converted HTML).

Here is a footnote reference,[^1] and another.[^longnote]

This is another reference to [^1]

[^1]: Here is the footnote.

And another reference to [^longnote]

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

    > This is a block quote
    > Inside a footnote

        { some.code }

    The whole paragraph can be indented, or just the first
    line.  In this way, multi-paragraph footnotes work like
    multi-paragraph list items.

This paragraph won't be part of the note, because it
isn't indented.

Here is a footnote reference,¹ and another.²

This is another reference to ¹

And another reference to ²

This paragraph won't be part of the note, because it isn't indented.

Auto-identifiers

Automatically attaches id attributes to headings. Can be used for creating tables of contents, etc.
It assigns IDs based on the heading text and ensures they are not duplicated.

# This is a heading
# This is a heading

Converted as follows:

<h1 id="this-is-a-heading">This is a heading</h1>
<h1 id="this-is-a-heading-1">This is a heading</h1>

TaskLists

- [ ] Item1
- [x] Item2
- [ ] Item3

• Item1
• Item2
• Item3

Media support

Can generate video links with players for YouTube, etc.

![youtube.com](https://www.youtube.com/watch?v=mswPy5bt3TQ)

![youtube.com/embed 2](https://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6)

![vimeo](https://vimeo.com/8607834)

![ok.ru](https://ok.ru/video/26870090463)

Abbreviations

You can define abbreviations and their full names.
In the example below, when you hover the mouse cursor over the abbreviation HTML, the tooltip will display the full name Hypertext Markup Language.

*[HTML]: Hypertext Markup Language

Later in a text we are using HTML and it becomes an abbr tag HTML

Later in a text we are using HTML and it becomes an abbr tag HTML

Figure, Footer, Cite

Generates <figure> and <figcaption> tags, <footer> tags, and <cite> tags.

• <figure> ... A tag for enclosing figures. Explanations can be added with the <figcaption> tag.
• <footer> ... Footer.
• <cite> ... A tag that represents the source or reference.

*These tags do not have unique styles (cite makes text italic), so the appearance doesn't change significantly. They are for providing semantics to HTML.

^^^
This is a figure
^^^ This is a *caption*

^^ This is a footer
^^ multi-line

This is a ""citation of someone""

Converted to HTML as follows:

<figure>
<p>This is a figure</p>
<figcaption>This is a <em>caption</em></figcaption>
</figure>

<footer>This is a footer
multi-line</footer>

<p>This is a <cite>citation of someone</cite></p>

Custom containers

Creates a <div class="[class name]"></div> block with :::[class name].

:::spoiler
This is a *spoiler*
:::

Converted to HTML as follows:

<div class="spoiler"><p>This is a <em>spoiler</em></p>
</div>

Mathematics (Enabling LaTeX notation)

Enables the use of LaTeX math notation.
A separate JavaScript library for rendering LaTeX is required. (This page uses MathJax)

This is a $E = mc^2$

$$
\begin{equation}
  \int_0^\infty \frac{x^3}{e^x-1}\,dx = \frac{\pi^4}{15}
  \label{eq:sample}
\end{equation}
$$

This is a \(E = mc^2\)

Soft lines as hard lines (Insert <br> on line break)

In Markdown, even if you insert a line break, the generated HTML does not include a line break, meaning no <br> is inserted (Soft line).
Normally, a line break (Hard line) is inserted when two or more half-width spaces are added at the end of a sentence, but enabling this extension will insert <br> simply by breaking the line.

This is a paragraph
with a break inside

This is a paragraph
with a break inside

Emoji (Insert emoji with shortcodes)

Enables inserting emojis using emoji shortcodes.

This is a test with a :) and a :angry: :smiley:

This is a test with a 😃 and a 😠 😃

Diagrams

Enables drawing diagrams such as flowcharts and sequence diagrams using text notation.
Currently, the following two libraries are supported:

• Mermaid
• nomnoml

Below is an example of Mermaid.

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;