Syntax Help | Markdown¶

Ctrl+Alt+Del

tabtab2Unordered listOrdered list

content

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Example

Unordered ListOrdered List

* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci

1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci

CC++

#include <stdio.h>

int main(void) {
  printf("Hello world!\n");
  return 0;
}

#include <iostream>

int main(void) {
  std::cout << "Hello world!" << std::endl;
  return 0;
}

``` mermaid

graph LR A[Start] → B{Error?}; B →|Yes| C[Hmm...]; C → D[Debug]; D → B; B ---->|No| E[Yay!];

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format



``` mermaid
sequenceDiagram
  autonumber
  Alice->>John: Hello John, how are you?
  loop Healthcheck
      John->>John: Fight against hypochondria
  end
  Note right of John: Rational thoughts!
  John-->>Alice: Great!
  John->>Bob: How about you?
  Bob-->>John: Jolly good!

stateDiagram-v2
  state fork_state <<fork>>
    [*] --> fork_state
    fork_state --> State2
    fork_state --> State3

    state join_state <<join>>
    State2 --> join_state
    State3 --> join_state
    join_state --> State4
    State4 --> [*]

classDiagram
  Person <|-- Student
  Person <|-- Professor
  Person : +String name
  Person : +String phoneNumber
  Person : +String emailAddress
  Person: +purchaseParkingPass()
  Address "1" <-- "0..1" Person:lives at
  class Student{
    +int studentNumber
    +int averageMark
    +isEligibleToEnrol()
    +getSeminarsTaken()
  }
  class Professor{
    +int salary
  }
  class Address{
    +String street
    +String city
    +String state
    +int postalCode
    +String country
    -validate()
    +outputAsLabel()  
  }

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
  LINE-ITEM {
    string name
    int pricePerUnit
  }
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

Grids¶

HTML for content and structure
JavaScript for interactivity
CSS for text running out of boxes
Internet Explorer ... huh?

Set up in 5 minutes

Install mkdocs-material with pip and get up and running in minutes

Getting started
It's just Markdown

Focus on your content and generate a responsive and searchable static site

Reference
Made to measure

Change the colors, fonts, language, icons, logo and more with a few lines

Customization
Open Source, MIT

Material for MkDocs is licensed under MIT and available on [GitHub]

License

HTML for content and structure

JavaScript for interactivity

CSS for text running out of boxes

Internet Explorer ... huh?

Unordered listOrdered list

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Content tabs

=== "Unordered list"

    * Sed sagittis eleifend rutrum
    * Donec vitae suscipit est
    * Nulla tempor lobortis orci

=== "Ordered list"

    1. Sed sagittis eleifend rutrum
    2. Donec vitae suscipit est
    3. Nulla tempor lobortis orci

Using definition lists¶¶

Lorem ipsum dolor sit amet

Sed sagittis eleifend rutrum. Donec vitae suscipit est. Nullam tempus tellus non sem sollicitudin, quis rutrum leo facilisis.

Cras arcu libero

Aliquam metus eros, pretium sed nulla venenatis, faucibus auctor ex. Proin ut eros sed sapien ullamcorper consequat. Nunc ligula ante.

Duis mollis est eget nibh volutpat, fermentum aliquet dui mollis. Nam vulputate tincidunt fringilla. Nullam dignissim ultrices urna non auctor.

Generic Grids¶

Unordered listOrdered list

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Sed sagittis eleifend rutrum
Donec vitae suscipit est
Nulla tempor lobortis orci

Buttons¶

Subscribe to our newsletter

Send

Task List

echo "Hello World - Example 1"
echo "Hello World - Example 2"
echo "Hello World - Example 3"
echo "Hello World - Example 4"
echo "Hello World - Example 5"
echo "Hello World - Example 6"

Admonitions¶

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Abstract

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Question

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Failure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Bug

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Annotations¶

Phasellus posuere in sem ut cursus (1)

Lorem ipsum dolor sit amet, (2) consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

I'm an annotation!
I'm an annotation as well!

Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

I'm an annotation! (1)
1. I'm an annotation as well!

Lorem ipsum dolor sit amet, (1) consectetur adipiscing elit.

I'm an annotation!

Conent tabs¶

Example

Unordered ListOrdered List

* Sed sagittis eleifend rutrum
* Donec vitae suscipit est
* Nulla tempor lobortis orci

1. Sed sagittis eleifend rutrum
2. Donec vitae suscipit est
3. Nulla tempor lobortis orci

Datatables¶

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

Method	Description
`GET`	Fetch resource
`PUT`	Update resource
`DELETE`	Delete resource

Footnotes¶

Lorem ipsum[^1] dolor sit amet, consectetur adipiscing elit.[^2]

Formatting¶

Text can be {--deleted--} and replacement text {++added++}. This can also be combined into {~~one~>a single~~} operation. {==Highlighting==} is also possible {>>and comments can be added inline<<}.

{==

Formatting can also be applied to blocks by putting the opening and closing tags on separate lines and adding new lines between the tags and the content.

==}

Hello

Header 2¶

Hello

Header 3¶

Hello

Header 4¶

Hello

Header 5¶

Hello

#!/bin/bash

echo "Hello World"

1	`import foo.bar`

2	`import foo.bar`

"""Some file."""
import foo.bar
import boo.baz
import foo.bar.baz

"""Some file."""
import foo.bar
import boo.baz
import foo.bar.baz

"""Some file."""
import foo.bar
import boo.baz
import foo.bar.baz

"""Some file."""
import foo.bar
import boo.baz
import foo.bar.baz

import foo.bar
import boo.baz
import foo.bar.baz

1	`import foo`

test

graph TD
    A[Hard] -->|Text| B(Round)
    B --> C{Decision}
    C -->|One| D[Result 1]
    C -->|Two| E[Result 2]

/// note | Did you know? You can create a note with Blocks! ///

/// example | Purple You can create an example ///

//// note | Some title /// details | Summary type: warning content /// Content ////

/// html | div some markdown content ///

/// html | div[style='border: 1px solid red ;'] some markdown content ///

/// tab | tab content ///

Tab 1Tab 2Tab 1Tab 2

Markdown content.

Multiple paragraphs.

More Markdown content.

list item a
list item b

Markdown content.

Multiple paragraphs.

More Markdown content.

list item a
list item b

Tab ATab BNot MeSelect MeNot Me Either

Different tab set.

More content.

Markdown content.

Multiple paragraphs.

More Markdown content.

list item a
list item b

Another Tab

~~Delete me~~

CH₃CH₂OH

Insert me

H²0

text^{a superscript}

Here is some code: import pymdownx; pymdownx.__version__.

The mock shebang will be treated like text here: #!js var test = 0;.

I'm italic and bold I am just bold.

I'm bold and italic! I am just italic.

I'm italic. I'm bold and italic. I'm also just italic.

A lot of underscores____________is okay

This will all be bold __because of the placement of the center underscores.

This will all be bold __ because of the placement of the center underscores.

This will NOT all be bold because of the placement of the center underscores.__

This will all be bold_ because of the token is less than that of the surrounding.

All will * be italic

All will *be italic

All will not be italic*

All will not ** be italic

All will * be bold

All will *be bold

All will not* be bold**

All will not *** be bold

Arithmatex¶

$p(x|y) = \frac{p(y|x)p(x)}{p(y)}$, $p(x|y) = \frac{p(y|x)p(x)}{p(y)}$.

\[ 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 \]

\[3 < 4\]

\[\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}\]

$a = array("foo" => 0, "bar" => 1);

Open styled details

Nested details!

And more content again.

Success

Content.

Warning

Content.

Example

Content.

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 {~~is~>are~~} great!

General block handling.

{--

test remove
test remove
test remove
- test remove
test remove

--}

{++

test add
test add
test add
- test add
test add

++}

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

/// example | 9.10 New Experimental Feature Blocks is currently a new, experimental extension type available in Pymdown Extensions that allows for writing a new kind of block extension in Python Markdown. With this new addition, we've added a number of new extensions utilizing this new extension type. While its intention is to hopefully replace extensions like Details and Tabbed, there are currently no immediate plans to deprecate those plugins.

Any and all feedback regarding these new, experimental blocks is appreciated. Please provide feedback here: #1973. ///

Images side By Side

![image alt <](){:height="500px" width="300px"}
![image alt >](){:height="500px" width="400px"}

Syntax Help | Markdown¶

Grids¶

Using definition lists¶¶

Generic Grids¶

Buttons¶

Admonitions¶

Annotations¶

Conent tabs¶

Datatables¶

Footnotes¶

Formatting¶

Header¶

Header 2¶

Header 3¶

Header 4¶

Header 5¶

Arithmatex¶