Markdown Examples¶

Admonition¶

These are the admonition types:

    @each $names, $appearance in (
      abstract summary tldr: $clr-light-blue-a400 "\E8D2", // subject
      info todo: $clr-cyan-a700 "\E88E", // info
      tip hint important : $clr-teal-a700 "\E80E", // whatshot
      success check done: $clr-green-a700 "\E876", // done
      question help faq: $clr-light-green-a700 "\E887", // help
      warning caution attention: $clr-orange-a400 "\E002", // warning
      failure fail missing: $clr-red-a200 "\E14C", // clear
      danger error: $clr-red-a400 "\E3E7", // flash_on
      bug: $clr-pink-a400 "\E868", // bug_report
      example: $clr-deep-purple-a400 "\E242", // format_list_numbered
      quote cite: $clr-grey "\E244" // format_quote
      )

This is a summary

And this is the body.

for i in list:
    print(i)

Info

My own custom title

Tip

Done

Question

Warning

Failure

Danger

Example of a bug with attribute

We can add an attribute list to this paragraph, but not to the whole admonition.

{: .admonition-class}

Example

Quote

??? bug "Collapsible ones with ???" This is not a bug. This is the Details extension.

Tables¶

header	other header	final one
these	do not	have to line up
but it looks better	when	they do

Code¶

See https://squidfunk.github.io/mkdocs-material/extensions/codehilite/

Critic¶

The critic markup lets you {--delete--} stuff and {++add it++} too, as well as {~~replace this~>with this~~}

Hero text¶

Appears at the top if the page. It is added to the metadata

Math¶

Setup explained in pymdown

$$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$

Lorem ipsum dolor sit amet: $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$

Emoji¶

Font-Awesome¶

fontawesome icons can be used in the same way, like so :fa-github

:fa-github:

:fa-github:{: style="font-size:3rem"}

Material icons¶

We can use the Material Design Icons but it has to be with html , .

, .

smarty¶

I "quote this".

Attribute Lists ¶

lets one add HTML id, classes, and attributes to the resulting element. Like so:

{: #id1 .class1 id=id2 class="class2 class3" style="margin-left:2em;width:50%"}

Inline attributes also work if we specify a class link but not with more complex stuff. link or this one

pymdown.extra¶

pymdown.extra provides lots of other things.

Definition Lists¶

Apple
:   Pomaceous fruit of plants of the genus Malus in
    the family Rosaceae.

Orange
:   The fruit of an evergreen tree of the genus Citrus.

Apple : Pomaceous fruit of plants of the genus Malus in the family Rosaceae.

Orange : The fruit of an evergreen tree of the genus Citrus.

Abbreviations¶

The HTML specification is maintained by the W3C.

Last update: April 20, 2019