Exemple¶

Builtin values¶

destination: Example.html

flow: true sequence: true mathjax: true

Meta Data¶

title: PyMdown Example author: - John Doe - Jane Doe

Settings overrides¶

pymdown_settings: template: example-template.html use_jinja2: true jinja2_block: ['<%', '%>'] jinja2_variable: ['<{', '}>'] jinja2_comment: ['<#', '#>'] markdown_extensions: markdown.extensions.smarty: markdown.extensions.admonition: markdown.extensions.footnotes: markdown.extensions.attr_list: markdown.extensions.def_list: markdown.extensions.tables: markdown.extensions.abbr: markdown.extensions.toc: title: Table of Contents slugify: !!python/name:pymdownx.slugs.uslugify permalink: "\uf0c1" pymdownx.highlight: extend_pygments_lang: - name: php-inline lang: php options: startinline: true - name: pycon3 lang: pycon options: python3: true pymdownx.magiclink: repo_url_shortener: true repo_url_shorthand: true social_url_shorthand: true user: facelessuser repo: Pymdown pymdownx.extrarawhtml: pymdownx.betterem: pymdownx.tilde: pymdownx.caret: pymdownx.mark: pymdownx.smartsymbols: pymdownx.emoji: pymdownx.tasklist: pymdownx.progressbar: pymdownx.superfences: pymdownx.arithmatex: pymdownx.inlinehilite: pymdownx.escapeall: hardbreak: True nbsp: True pymdownx.keys: separator: ＋ pymdownx.details: pymdownx.striphtml: pymdownx.b64: base_path: ${BASE_PATH} pymdown.critic: pymdownx.snippets: base_path: ${BASE_PATH}

test: This example of normal meta extension title: This title will be overridden by YAML

Extensions Used in this Document

This is mainly to visually inspect markdown output offered by PyMdown. This isn't a real test. Here are the enabled extensions:

YAML

markdown_extensions:
  markdown.extensions.smarty:
  markdown.extensions.admonition:
  markdown.extensions.footnotes:
  markdown.extensions.attr_list:
  markdown.extensions.def_list:
  markdown.extensions.tables:
  markdown.extensions.abbr:
  markdown.extensions.toc:
    title: Table of Contents
    slugify: !!python/name:pymdownx.slugs.uslugify
    permalink: "\uf0c1"
  pymdownx.highlight:
    extend_pygments_lang:
      - name: php-inline
        lang: php
        options:
          startinline: true
      - name: pycon3
        lang: pycon
        options:
          python3: true
  pymdownx.magiclink:
    repo_url_shortener: true
    repo_url_shorthand: true
    social_url_shorthand: true
    user: facelessuser
    repo: Pymdown
  pymdownx.extrarawhtml:
  pymdownx.betterem:
  pymdownx.tilde:
  pymdownx.caret:
  pymdownx.mark:
  pymdownx.smartsymbols:
  pymdownx.emoji:
  pymdownx.tasklist:
  pymdownx.progressbar:
  pymdownx.superfences:
  pymdownx.arithmatex:
  pymdownx.inlinehilite:
  pymdownx.escapeall:
    hardbreak: True
    nbsp: True
  pymdownx.keys:
    separator: ＋
  pymdownx.details:
  pymdownx.striphtml:
  pymdownx.b64:
    base_path: ${BASE_PATH}
  pymdown.critic:
  pymdownx.snippets:
    base_path: ${BASE_PATH}

Notes

sane_lists will alter the results of Mixed Lists. When turned off, this document will have all list items mixed and aligned proper. With sane_lists on, some will not be recognized, and some items may be aligned in different lists. sane_lists is disabled in this example.
having guess_lang=False allows selective highlighting of only the blocks that specify a language. When omitted or set true, it can be expected that all of the blocks will be highlighted to some extent (in some cases very wrong). guess_lang is disabled in this example.
pymdown.b64 can be verified by checking the source of one of the images to see if conversion occured.

Headers¶

Text Only

# H1
## H2
### H3
#### H4
##### H5
###### H6
### Duplicate Header
### Duplicate Header

Note

H2¶

H3¶

H4¶

H5¶

H6¶

Duplicate Header¶

Horizontal Rules¶

Text Only

---

- - -

***

* * *

___

_ _ _

Paragraphs¶

Text Only

This is a paragraph.
I am still part of the paragraph.

New paragraph.

This is a paragraph. I am still part of the paragraph.

New paragraph.

Inline¶

Text Only

`inline block`

++ctrl+alt+delete++

<cite>citation</cite>


This is a ==mark (with **bold** *italic* `code`)== tag.

~~strike~~


~~smart~~stike~~

==smart==mark==


**bold 1** and __bold 2__

*italic 1*  and _italic 2_


***bold 1 and italic 1***

___bold 2 and italic 2___

__*bold 2 and italic 1*__

**_bold 1 and italic 2_**


~~*strike italic 1*~~ and *~~strike italic 2~~*

~~_strike italic 2_~~ and  _~~strike italic 2~~_


~~**strike bold 1**~~ and **~~strike bold 1~~**

~~__strike bold 2__~~ and __~~strike bold 2~~__


~~***strike italic 1 bold 1***~~ and ***~~strike italic 1 bold 1~~***

~~___strike italic 2 bold 2___~~ and ___~~strike italic 2 bold 2~~___

**~~*strike italic 1 bold 1*~~** and *~~**strike italic 1 bold 1**~~*

__~~_strike italic 2 bold 2_~~__ and _~~__strike italic 2 bold 2__~~_

**~~_strike italic 2 bold 1_~~** and _~~**strike italic 2 bold 1**~~_

__~~*strike italic 1 bold 2*~~__ and *~~__strike italic 1 bold 2__~~*

inline block

Ctrl+Alt+Del

citation

This is a mark (with bold italic code) tag.

~~strike~~

~~smart~~stike~~

smart==mark

bold 1 and bold 2

italic 1 and italic 2

bold 1 and italic 1

bold 2 and italic 2

bold 2 and italic 1

bold 1 and italic 2

~~strike italic 1~~ and ~~strike italic 2~~

~~strike italic 2~~ and ~~strike italic 2~~

~~strike bold 1~~ and ~~strike bold 1~~

~~strike bold 2~~ and ~~strike bold 2~~

~~strike italic 1 bold 1~~ and ~~strike italic 1 bold 1~~

~~strike italic 2 bold 2~~ and ~~strike italic 2 bold 2~~

~~strike italic 1 bold 1~~ and ~~strike italic 1 bold 1~~

~~strike italic 2 bold 2~~ and ~~strike italic 2 bold 2~~

~~strike italic 2 bold 1~~ and ~~strike italic 2 bold 1~~

~~strike italic 1 bold 2~~ and ~~strike italic 1 bold 2~~

Links¶

Footnote and reference sources are at the bottom of the page.

Text Only

[Reference Link][1]

Footnotes[^1] have a label[^label] and a definition[^!DEF]

![A Picture](bg.png "A Picture")

[Link to Picture](bg.png "Link")

https://github.com/facelessuser/pymdown

This is a link https://github.com/facelessuser/pymdown.

This is a link "https://github.com/facelessuser/pymdown".

With this link (https://github.com/facelessuser/pymdown), it still works.

    [1]: https://github.com/facelessuser/pymdown
    [^1]: This is a footnote
    [^label]: A footnote on "label"
    [^!DEF]: The footnote for definition

[Reference Link][1]

Footnotes[^1] have a label[^label] and a definition[^!DEF]

Link to Picture

www.google.com

isaacmuse@gmail.com

https://github.com/facelessuser/pymdown

This is a link https://github.com/facelessuser/pymdown.

This is a link "https://github.com/facelessuser/pymdown".

With this link (https://github.com/facelessuser/pymdown), it still works.

Abbreviation¶

Abreviations source are found at the bottom of the page

Text Only

The HTML specification
is maintained by the W3C.

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

The HTML specification is maintained by the W3C.

Unordered List¶

Text Only

Unordered List

- item 1
    * item A
    * item B
        more text
        + item a
        + item b
        + item c
    * item C
- item 2
- item 3

Unordered List

item 1
- item A
- item B more text
  - item a
  - item b
  - item c
- item C
item 2
item 3

Ordered List¶

Text Only

Ordered List

1. item 1
    1. item A
    2. item B
        more text
        1. item a
        2. item b
        3. item c
    3. item C
2. item 2
3. item 3

Ordered List

item 1
1. item A
2. item B more text
  1. item a
  2. item b
  3. item c
3. item C
item 2
item 3

Task List¶

Text Only

Task List

- [X] item 1
    * [X] item A
    * [ ] item B
        more text
        + [x] item a
        + [ ] item b
        + [x] item c
    * [X] item C
- [ ] item 2
- [ ] item 3

Task List

Mixed Lists¶

Really Mixed Lists should break with sane_lists on.

Text Only

Mixed Lists

- item 1
    * [X] item A
    * [ ] item B
        more text
        1. item a
        2. item b
        3. item c
    * [X] item C
- item 2
- item 3


Really Mixed Lists

- item 1
    * [X] item A
    - item B
        more text
        1. item a
        + item b
        + [ ] item c
    3. item C
2. item 2
- [X] item 3

Mixed Lists

item 1
- item A
- item B more text
  1. item a
  2. item b
  3. item c
- item C
item 2
item 3

Really Mixed Lists

item 1
- item A
- item B more text
  1. item a
  2. item b
  3. item c
- item C
item 2
item 3

Dictionary¶

Text Only

Dictionary
:   item 1

    item 2

    item 3

Dictionary

item 1

item 2

item 3

Blocks¶

Text Only

Normal raw block

    This is a block.

    This is more of a block.

Highlighted code block

    :::javascript
    // Fenced **with** highlighting
    function doIt() {
        for (var i = 1; i <= slen ; i^^) {
            setTimeout("document.z.textdisplay.value = newMake()", i*300);
            setTimeout("window.status = newMake()", i*300);
        }
    }

Normal raw block

Text Only

This is a block.

This is more of a block.

Highlighted code block

Text Only

:::javascript
// Fenced **with** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}

Block Quotes¶

Text Only

> This is a block quote.

> > How does it look?
> > <cite>--I said this too</cite>

> I think it looks good.
> <cite>--I said this</cite>

This is a block quote.

How does it look? --I said this too

I think it looks good. --I said this

Fenced Block¶

Assuming guessing is not enabled.

Text Only

```
// Fenced **without** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}
```

~~~{javascript}
var Test = 0;
~~~

```javascript hl_lines="4 5"
// Fenced **with** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}
```

Text Only

// Fenced **without** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}

Text Only

var Test = 0;

JavaScript

// Fenced **with** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}

Tables¶

Text Only

| _Colors_      | Fruits          | Vegetable         |
| ------------- |:---------------:| -----------------:|
| Red           | *Apple*         | [Pepper](#Tables) |
| ~~Orange~~    | `Oranges`       | **Carrot**        |
| Green         | ~~***Pears***~~ | Spinach           |

Colors	Fruits	Vegetable
Red	Apple	Pepper
~~Orange~~	`Oranges`	Carrot
Green	~~*Pears*~~	Spinach

Smarter Bold (and Emphasis)¶

Text Only

Text with double__underscore__words.

__Strong__ still works.

__this__works__too__


Text with single_underscore_words.

_Emphasis_ still works.

_this_works_too_


Text with double**star**words.

**Strong** still works.

**this**works**too**


Text with single*star*words.

*Emphasis* still works.

*this*works*too*

Text with tripleunderscorewords.

Strong still works.

thisworkstoo

Text with double__underscore__words.

Strong still works.

this__works__too

Text with single_underscore_words.

Emphasis still works.

this_works_too

Text with triplestarwords.

Strong still works.

thisworkstoo

Text with doublestarwords.

Strong still works.

thisworkstoo

Text with singlestarwords.

Emphasis still works.

thisworkstoo

Smarty¶

Text Only

"double quotes"

'single quotes'

da--sh

elipsis...

"double quotes"

'single quotes'

da--sh

elipsis...

Smart Symbols¶

Text Only

Copyright (c)
Trademark(tm)
Registered(r)

230 +/- 10% V

A != B

right arrow -->
left arrow <--
double arrow <-->

Fraction 1/2
Fraction 1/4
Fraction 3/4
Fraction 1/3
Fraction 2/3
Fraction 1/5
Fraction 2/5
Fraction 3/5
Fraction 4/5
Fraction 1/6
Fraction 5/6
Fraction 1/8
Fraction 3/8
Fraction 5/8
Fraction 7/8

230 ± 10% V

A != B

right arrow → left arrow ← double arrow ↔

Fraction ½ Fraction ¼ Fraction ¾ Fraction ⅓ Fraction ⅔ Fraction ⅕ Fraction ⅖ Fraction ⅗ Fraction ⅘ Fraction ⅙ Fraction ⅚ Fraction ⅛ Fraction ⅜ Fraction ⅝ Fraction ⅞

Attribute List¶

Text Only

Normal Text

Modified Text
{: style="font-weight:bold;" }

Normal Text

Modified Text

Admonition¶

Text Only

!!! Attention "Success!"
    You can use inline ~~stuff~~ markup too!

!!! Hint "Info!"
    - Here is some info.
    - And some more

!!! Caution "Warning!"
    - [X] Make sure you turn off the stove
    - [X] Don't run with scissors

!!! Danger "Alert!"
    You really need to read [this](#admonition)!

!!! Question "Question?"
    Are you serious?

!!! Note "Note"
    :smile:

    > Not all markup can be placed in these boxes, but you can fit all sorts of things in them. But you will notice that the styles don't always play nice with each other.  Additional CSS could fix this though.

    Stuff like _this_ works too.

    | _Colors_      | Fruits          | Vegetable    |
    | ------------- |:---------------:| ------------:|
    | Red           | *Apple*         | Pepper       |
    | ~~Orange~~    | `Oranges`       | **Carrot**   |
    | Green         | ~~***Pears***~~ | Spinach      |

        :::javascript
        // Fenced **with** highlighting
        function doIt() {
            for (var i = 1; i <= slen ; i^^) {
                setTimeout("document.z.textdisplay.value = newMake()", i*300);
                setTimeout("window.status = newMake()", i*300);
            }
        }

!!! Unknown "Title"
    `Default` class style

Success!

You can use inline ~~stuff~~ markup too!

Info!

Here is some info.
And some more

Warning!

Make sure you turn off the stove
Don't run with scissors

Alert!

You really need to read this!

Question?

Are you serious?

Note

Not all markup can be placed in these boxes, but you can fit all sorts of things in them. But you will notice that the styles don't always play nice with each other. Additional CSS could fix this though.

Stuff like this works too.

Colors	Fruits	Vegetable
Red	Apple	Pepper
~~Orange~~	`Oranges`	Carrot
Green	~~*Pears*~~	Spinach

Text Only

:::javascript
// Fenced **with** highlighting
function doIt() {
    for (var i = 1; i <= slen ; i^^) {
        setTimeout("document.z.textdisplay.value = newMake()", i*300);
        setTimeout("window.status = newMake()", i*300);
    }
}

Title

Default class style

Details¶

Text Only

??? "This is a details"
    This is some content

This is a details

This is some content

Github Emoji¶

Text Only

This is a test for emoji :smile:.  The emojis are images linked to github assets :octocat:.

This is a test for emoji . The emojis are images linked to github assets :octocat:.

People¶

:bowtie::bride_with_veil::facepunch::feelsgood::finnadie::fu::goberserk::godmode::hand::hurtrealbad::neckbeard::rage1::rage2::rage3::rage4::running::suspect::trollface:

Nature¶

:moon::octocat::squirrel:

Objects¶

:flipper::hocho::iphone::lantern::phone::shoe::tshirt:

Places¶

:boat::car::uk:

Symbols¶

:heavy_exclamation_mark::large_blue_circle::shipit:

Insert¶

Text Only

^^insert^^

^^smart^^insert^^

^^*insert italic*^^  *^^insert italic 2^^*

^^_insert italic_^^  _^^insert italic 2^^_

^^**insert bold**^^  **^^insert bold 2^^**

^^__insert bold__^^  __^^insert bold 2^^__

^^***insert italic bold***^^  ***^^insert italic bold 2^^***

^^___insert italic bold___^^  ___^^insert italic bold 2^^___

**^^*insert italic bold*^^**  *^^**insert italic bold 2**^^*

__^^_insert italic bold_^^__  _^^__insert italic bold 2__^^_

**^^_insert italic bold_^^**  _^^**insert italic bold 2**^^_

__^^*insert italic bold*^^__  *^^__insert italic bold 2__^^*

insert

smart^^insert

insert italic insert italic 2

insert bold insert bold 2

insert italic bold insert italic bold 2

insert italic bold insert italic bold 2

Subscript and Superscript¶

Pandoc style subscript and superscripts

Text Only

CH~3~CH~2~OH

[ClO~2~]^+^

x^2^ + y^2^ = 4

Text^superscript^

Text^superscript failed^

Text^superscript\ success^

Text~subscript~

Text~subscript failed~

Text~subscript\ success~

CH₃CH₂OH

[ClO₂]⁺

x² + y² = 4

Text^superscript

Text^superscript failed^

Text^{superscript success}

Text_subscript

Text~subscript failed~

Text_{subscript success}

Progress¶

Progress bars are block elements and it is recommened to put a newline before and after. But they will be recognized inline, but they will be on their own line.

Normally you would just globally set your additional classes: progressbar(add_classes=candystripe-animate), but here we will demonstrate that it works with the attr_list extension. It will take inline style.

To turn off level classes (which are used to decide special colors for certain percentages) you could just use progressbar(level_class=False).

Text Only

| Test               | Result                                    |
|--------------------|-------------------------------------------|
|Animated: 0%        |[=0% "0%"]{: .candystripe-animate}         |
|Animated: 5%        |[=5% "5%"]{: .candystripe-animate}         |
|Animated: 25%       |[=25% "25%"]{: .candystripe-animate}       |
|Animated: 45%       |[=45% "45%"]{: .candystripe-animate}       |
|Animated: 65%       |[=65% "65%"]{: .candystripe-animate}       |
|Animated: 85%       |[=85% "85%"]{: .candystripe-animate}       |
|Animated: 100%      |[=100% "100%"]{: .candystripe-animate}     |
|Division Percentage |[= 212.2/537 "212.2/537 Testing division"] |
|No Label            |[= 50%]                                    |
|Inline              |Before[= 50% "I'm a block!"]After          |

Test	Result
Animated: 0%	0%
Animated: 5%	5%
Animated: 25%	25%
Animated: 45%	45%
Animated: 65%	65%
Animated: 85%	85%
Animated: 100%	100%
Division Percentage	212.2/537 Testing division
No Label
Inline	Before I'm a block! After

Neseted Fences:¶

Text Only

    ```
    This will still be parsed
    as a normal indented code block.
    ```

```
This will still be parsed
as a fenced code block.
```

- This is a list that contains multiple code blocks.

    - Here is an indented block

            ```
            This will still be parsed
            as a normal indented code block.
            ```

    - Here is a fenced code block:

        ```
        This will still be parsed
        as a fenced code block.
        ```

        > ```
        > Blockquotes?
        > Not a problem!
        > ```

Text Only

```
This will still be parsed
as a normal indented code block.
```

Text Only

This will still be parsed
as a fenced code block.

This is a list that contains multiple code blocks.

Here is an indented block

Text Only

```
This will still be parsed
as a normal indented code block.
```

Here is a fenced code block:

Text Only

This will still be parsed
as a fenced code block.

Text Only

Blockquotes?
Not a problem!

UML Flow Charts¶

Text Only

```flow
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
```

Text Only

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

UML Sequence Diagrams¶

Text Only

```sequence
Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
```

Text Only

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Math¶

TeX

Some Equations:

$$
E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j
$$

- Here are some more equations:

    $$
        \begin{align}
            p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \\
            p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right)
        \end{align}
    $$

- Inline equations: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$.

Some Equations:

$$ E(\mathbf{v}, \mathbf{h}) = -\sum_{i,j}w_{ij}v_i h_j - \sum_i b_i v_i - \sum_j c_j h_j $$

Here are some more equations:

$$ \begin{align} p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right) \ p(h_j=1|\mathbf{v}) & = \sigma\left(\sum_i w_{ij}v_i + c_j\right) \end{align} $$
Inline equations: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$.

Critic¶

Text Only

Here is some \*incorrect* Markdown.  I am adding this\ here..  Here is some more \text
that I am removingtext.  And here is even more \text that I
am adding.\   Paragraph was deleted and replaced with some spaces.\  

 

Spaces were removed and a paragraph was added.

And here is a comment on \some
==text== \This works quite well. I just wanted to comment on it.. Substitutions \isare great!

Escape \\This text is preserved.

General block handling.

\

* test
* test
* test
    * test
* test



\

* test
* test
* test
    * test
* test

Here is some ~~incorrect~~ Markdown. I am adding this here.. Here is some more ~~text that I am removing~~text. And here is even more text that I am adding. Paragraph was deleted and replaced with some spaces.

Spaces were removed and a paragraph was added.

And here is a comment on some text This works quite well. I just wanted to comment on it.. Substitutions isare great!

Escape \This text is preserved.

General block handling.

test

test

test

test

test

test
test
test
- test
test

Template Test¶

Text Only

<%- raw %>
<# This is the page title #><{ page.title }>
<% endraw %>

<# This is the page title #><{ page.title }>