Markdown

[rogerxu]

Daring Fireball: Markdown Syntax Documentation

[rogerxu]

Headers

This is an H1
=============

This is an H2
-------------

# This is an H1

## This is an H2

###### This is an H6

[rogerxu]

Blockquotes

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

Output

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

[rogerxu]

Lists

Unordered

* Red
* Green
* Blue

Output

• Red
• Green
• Blue

Ordered

1. Bird
2. McHale
3. Parish

Output

1. Bird
2. McHale
3. Parish

Paragraph in the List

If list items are separated by blank lines, Markdown will wrap the items in <p> tags in the HTML output.

*   Bird

*   Magic

will turn into:

<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>

List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

*   This is a list item with two paragraphs.

    This is the second paragraph in the list item. You're
only required to indent the first line. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.

*   Another item in the same list.

Blockquote in the List

To put a blockquote within a list item, the blockquote’s > delimiters need to be indented:

*   A list item with a blockquote:

    > This is a blockquote
    > inside a list item.

Code block in the List

To put a code block within a list item, the code block needs to be indented twice — 8 spaces or two tabs:

*   A list item with a code block:

        <code goes here>

Avoid list

1986\. What a great season.

[rogerxu]

Code Blocks

Use ``` to wrap code blocks.

[rogerxu]

Code

Use the `printf()` function.

Literal backtick

To include a literal backtick character within a code span, you can use multiple backticks as the opening and closing delimiters:

``There is a literal backtick (`) here.``

Outpout

There is a literal backtick (`) here.

Literal backtick at the beginning or end of a code span

The backtick delimiters surrounding a code span may include spaces — one after the opening, one before the closing. This allows you to place literal backtick characters at the beginning or end of a code span:

A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``

Output

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

[rogerxu]

Links

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Reference-style links

Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:

This is [an example][id] reference-style link.

You can optionally use a space to separate the sets of brackets:

This is [an example] [id] reference-style link.

Then, anywhere in the document, you define your link label like this, on a line by itself:

[id]: http://example.com/  "Optional Title Here"

Implicit link

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

[rogerxu]

Images

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

Markdown has no syntax for specifying the dimensions of an image; if this is important to you, you can simply use regular HTML <img> tags.

[rogerxu]

Diagrams

mermaid

Tools

Markdown Diagrams

Examples

https://github.com/marcozaccari/markdown-diagrams-browser-extension/blob/master/doc/examples/mermaid.md

Flowchart

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

Sequence Diagram

sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!

Class Diagram

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

Entity Relationship Diagram

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