commonmark
Markdown with Commonmark
Source: Commonmark
1.1. Heading
1.1.1. ATX Heading
Notes:
Always put a space between
#and the heading nameMaximum to
</h6>headingA leaf block, it cannot contain other block
Markdown syntax:
HTML code:
Markdown display:
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
HTML display:
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
### 1.1.2. Setex Heading *Notes:* - Maximum to `` heading - Underlining `---` or `==` can be any length: - A blank line is needed between a paragraph and a following setext heading - A leaf block, it cannot contain other block Markdown syntax: ```md h1 Heading =================== h2 Heading ------------------- ``` HTML code: ```html
h1 Heading
h2 Heading
``` Markdown display: h1 Heading ======== h2 Heading ------------- HTML display:
h1 Heading
h2 Heading
1.2. Paragraphs
Notes:
To create paragraphs, use a blank line to separate one or more lines of text.
Don't ident paragraphs with spaces or tabs
A leaf block, it cannot contain other block
Markdown syntax:
HTML code:
Markdown display:
This is the first paragraph.
This is the second paragraph
HTML display:
This is the first paragraph.
This is the second paragraph
1.3 Line Break
1.3.1 Hard Line Break
Notes:
To create a line break, end a line of text with two or more spaces, and then type return
Or by ended it with
\Or by use the
<br>HTML tag
Markdown syntax:
HTML code:
Markdown display:
This is the first line, ended with two spaces. And this is the second line.
This is the first line, ended with \. And this is the second line.
This is the first line, ended with <br>.
And this is the second line.
HTML display:
This is the first line, ended with two spaces. And this is the second line.
This is the first line, ended with \.
And this is the second line.
This is the first line, ended with <br>.
And this is the second line.
1.3.2 Soft Line Break
Note:
A regular line break (not in a code span or HTML tag) that is not preceded by two or more spaces or a backslash is parsed as a softbreak. (A softbreak may be rendered in HTML either as a line ending or as a space.
Markdown syntax:
HTML code:
Markdown display:
This is the first line, without two spaces in the end. And this is the second line.
HTML display:
This is the first line, without two spaces in the end. And this is the second line.
1.4. Emphasis
Between
*or_and text should be not any whitespace.*italics*or_italics_will make italics**bold**or__bold__will make bold
Markdown syntax:
HTML code:
Markdown display:
This is bold text This is bold text This is italic text This is italic text We have bold*italic This text is **really important This text is really important This text is __really important*__ This text is really important**
HTML display:
This is bold text This is bold text This is italic text This is italic text We have bolditalic This text is really important This text is really important This text is really important This text is really important
1.5. Blockquotes
Notes:
A container block, it can contain other block
You could just add only one
>at the first line (lazy-continuation);Blockquotes can contain other blockquotes (nested)
Blockquotes can contain other blocks: multiple paragraphs, heading, code, etc.
Blockquotes can contain other Markdown formatted elements. But not all elements can be used.
Markdown syntax:
HTML code:
Markdown display:
Blockquotes can also be nested...
...by using
>right next to each other......or with spaces between arrows.
HTML display:
Blockquotes can also be nested...
...by using
>right next to each other......or with spaces between arrows.
Markdown syntax:
HTML code:
Markdown display:
A Heading 3
List
of
code.Everything is going according to plan in example.
HTML display:
A Heading 3
List
of
code.Everything is going according to plan in example.
1.6. List Items
Notes:
Bullet (unordered) list is a list with
-,+, or*character marker.Ordered list is a list with maximum length 9 arabic digits marker (from 0 to 9), followed by either a
.character or a)character.
1.6.1 List with Indentation
add at least one whitespace more for indented paragraph but not listed
add a space between line
Markdown syntax:
HTML code:
Markdown display:
a paragraph
indented paragraph (not listed)
next paragraph
a paragraph
indented paragraph (not listed)
next paragraph
HTML display:
a paragraph
indented paragraph (not listed)
next paragraph
a paragraph
indented paragraph (not listed)
next paragraph
### 1.6.2 List with Other Blocks Markdown syntax: ```md 1. List block can contain ``` code block ``` paragraph > quote block 2. code 3. #### Heading4 4. >> quote ``` HTML code: ```html
List block can contain
paragraph
quote block
Heading4
quote
``` Markdown display: 1. List block can contain ``` code block ``` paragraph > quote block 2. code 3. #### Heading4 4. >> quote HTML display:
List block can contain
paragraph
quote block
Heading4
quote
1.6.3 Maximum Digit for Ordered List is 9
Notes:
To prevent buffer overflow in some browser
Markdown syntax:
HTML code:
Markdown display:
list
continue
list
buffer overflow
HTML display:
list
continue
list 1234567890. buffer overflow
1.6.4 Indentitation
Notes:
A sublist must be indented the same number of spaces a paragraph would need to be in order to be included in the list item.
Add some space so the next mark of the next item will be positioned under the first character of previous list item.
Markdown syntax:
HTML code:
Markdown display:
foo
add two spaces
add two spaces
add two spaces
HTML display:
foo
add two spaces
add two spaces
add two spaces
1.7. Lists
Notes:
A list is a sequence of one or more list items of the same type.
The list items may be separated by any number of blank lines.
Two list items are of the same type if they begin with a list marker of the same type.
Two list markers are of the same type if (a) they are bullet list markers using the same character (
-,+, or*) or (b) they are ordered list numbers with the same delimiter (either.or)).A list is an ordered list if its constituent list items begin with ordered list markers, and a bullet list if its constituent list items begin with bullet list markers.
A list is loose if any of its constituent list items are separated by blank lines (loose list are wrapped in
<p>tags), or if any of its constituent list items directly contain two block-level elements with a blank line between them. Otherwise a list is tight.
1.7.1 Paragraph and Starting New List
Notes:
No blank line is needed to separate a paragraph from a following list
Changing the bullet or ordered list delimiter starts a new list
Markdown syntax:
HTML code:
Markdown display:
I have: 1. foo 10. bar 5) baz 11) buzz
ouch
what
where
HTML display:
I have:
foo
bar
baz
buzz
ouch
what
where
### 1.7.2. Blank Lines and Blank HTML Comment *Notes:* - There can be any number of blank lines between items - To separate consecutive lists of the same type, or to separate a list from an indented code block, insert a blank HTML comment Markdown syntax: ```md - foo notcode - foo code ``` HTML code: ```html
foo
notcode
foo
``` Markdown display: - foo notcode - foo code HTML display:
foo
notcode
foo
### 1.7.3. Bullet (Unordered) Lists Markdown syntax: ```md + To start a list, there should be an empty line above + Create a list by starting a line with `+`, `-`, or `*` - Changing the sign will add a linespace (make new list) + Add text under an item This is a text under an item. Notice that there are two spaces at the end above. - Sub-lists are made by indenting 2 spaces (to ensure the next mark is fallen under the first character of previous list item): * Item 2a * Item 2b * Item 3 To end a list, there should be one empty line above. ``` Markdown display: + To start a list, there should be an empty line above + Create a list by starting a line with `+`, `-`, or `*` - Changing the sign will add a linespace (make new list) + Add text under an item This is a text under an item. Notice that there are two spaces at the end above. - Sub-lists are made by indenting 2 spaces (to ensure the next mark is fallen under the first character of previous list item): * Item 2a * Item 2b * Item 3 To end a list, there should be one empty line above. ### 1.7.4. Ordered Lists *Notes:* - The start number of an ordered list is determined by the list number of its initial list item. The numbers of subsequent list items are disregarded. Markdown syntax: ```md 1. Notice that the sequence number is irrelevant. 1. Notice that there are two spaces at the end. To make a new text under item. 3. Sub-lists are made by indenting 4 spaces (to ensure the next mark is fallen under the first character of previous list item) 1. Item 3a 2. Item 3b 8. Any number for item 4 ``` Markdown display: 1. Notice that the sequence number is irrelevant. 1. Notice that there are two spaces at the end. To make a new text under item. 3. Sub-lists are made by indenting 4 spaces (to ensure the next mark is fallen under the first character of previous list item) 1. Item 3a 2. Item 3b 8. Any number for item 4 ### 1.7.5. Ordered List Continuation Markdown syntax: ```md 57. will started with offset 57 1. so it will be 58 ``` HTML code: ```html
will started with offset 57
so it will be 58
``` Markdown display: 57. will started with offset 57 1. so it will be 58 HTML display:
will started with offset 57
so it will be 58
### 1.7.6. Elements in Lists *Notes:* - To add another element in a list while preserving the continuity of the list, indent the element four spaces or one tab Markdown syntax: ```md * This is the first list item. > A blockquote would look great below the second list item. * Here's the second list item. I need to add another paragraph below the second list item. * And here's the third list item.  * and the last list item ``` Markdown display: * This is the first list item. > A blockquote would look great below the second list item. * Here's the second list item. I need to add another paragraph below the second list item. * And here's the third list item.  * and the last list item *But, for text element in ordered list, add five spaces* 1. This is the first list item. > A blockquote would look great below the second list item. 2. Here's the second list item. I need to add another paragraph below the second list item. 3. And here's the third list item.  4. and the last list item *But, for code blocks in the lists, add eight spaces or two tabs.* 1. Open the file. 2. Find the following code block on line 21:Test 3. Update the title to match the name of your website. --- ## 1.8. Code and Code Blocks ### 1.8.1. Inline Code (Code Spans) *Notes:* - It is inline content - It is written between two backticks `\'` Markdown syntax: ```md This is a `code`. ``` HTML code: ```html
This is a code. ``` Markdown display: This is a `code`. HTML display:
This is a code.
1.8.2. Indented Code Blocks
Notes:
Idented by add at least four spaces or one tab before
A leaf block, it cannot contain other block
Markdown syntax:
HTML code:
Markdown display:
HTML display:
1.8.3. Fenced Code Blocks
Notes:
A code fence is a sequence of at least three consecutive backtick characters (`) or tildes (~)
An info string can be provided after the opening code fence
langis optional to help to specify the language of the code.A leaf block, it cannot contain other block
Markdown syntax:
HTML code:
Markdown display:
HTML display:
1.9. Links
1.9.1. Inline Links
Notes:
A link contains link text (the visible text), a link destination (the URI that is the link destination), and optionally a link title.
Markdown syntax:
HTML code:
Markdown display:
This is link
This is link with title and code
This is https://example.com/
HTML display:
This is link
This is link with title and code
This is https://example.com/
1.9.2. Full Reference Links
Notes:
A full reference link consists of a link text immediately followed by a link label that matches a link reference definition elsewhere in the document
Markdown syntax:
HTML code:
Markdown display:
This is a foo
HTML display:
This is a foo
1.9.3. Shortcut Reference Links
Notes:
A shortcut reference link consists of a link label that matches a link reference definition elsewhere in the document and is not followed by
[]or a link label.
Markdown syntax:
HTML code:
Markdown display:
This is a foo
HTML display:
This is a foo
1.9.4. Autolinks
Autolinks are absolute URIs and email addresses inside
<and>. They are parsed as links, with the URL or email address as the link label.Spaces are not allowed in autolink change it to
%20
Markdown syntax:
HTML code:
Markdown display:
HTML display:
1.10. Images
Notes:
Syntax for images is like the syntax for links, with one difference. Instead of link text, we have an image description.
The rules for this are the same as for link text, except that (a) an image description starts with ![ rather than [, and (b) an image description may contain links.
It is not recommended to use image links in reference format. Some apps will not preview those images.
1.10.1 Inline Links Format
1.10.2 Full References Format
1.10.3 Shorcut References Format
1.11. Escaping Characters
Note:
add a backslash
\in front of the ASCII character.Any ASCII punctuation character may be backslash-escaped
Markdown syntax:
HTML code:
Markdown display:
!\"#$\%\&\'()*+\, -.\/\:\;\<\=>\?\@[\] \^_`{|}~
*not emphasized \ not a tag [not a link](/foo) `not code` 1. not a list \ not a list # not a heading [foo]: /url "not a reference" \ö not a character entity
HTML display:
!"#$%&'()*+, -./:;<=>?@[\] ^_`{|}~
*not emphasized* <br/> not a tag [not a link](/foo) `not code` 1. not a list * not a list # not a heading [foo]: /url "not a reference" ö not a character entity
1.12. Raw HTML and HTML Blocks
1.12.1. Raw HTML
Notes:
Text between
<and>that looks like an HTML tag is parsed as a raw HTML tag and will be rendered in HTML without escaping.
Markdown syntax:
HTML code:
Markdown display:
bold red
HTML display:
bold red ### 1.12.2. HTML Blocks *Notes:* - An HTML block is a group of lines that is treated as raw HTML - With start and end conditions are: - start with ``, ``, or `` - start with `` - start with `` - start with `` - start wtih `` - start with string ``, or the string `/>` - A leaf block, it cannot contain other block Markdown syntax: ```md
``` HTML code: ```html
``` Markdown display:
HTML display:
--- ## 1.13. Entities and Character *Note:* - Valid HTML entity references and numeric character references can be used in place of the corresponding Unicode character, except - Entity references consist of `&` + any of the valid HTML5 entity names + `;` - Decimal numeric character references consist of ``&#` + a string of 1–7 arabic digits + `;` - Hexadecimal numeric character references consist of ``&#` + either `X` or `x` + a string of 1-6 hexadecimal digits + `;` Markdown syntax: ```md Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸ Decimal: # Ӓ Ϡ � Hexadecimal: " ആ ಫ ``` HTML code: ```html
Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸
Decimal: # Ӓ Ϡ �
Hexadecimal: " ആ ಫ ``` Markdown display: Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸ Decimal: # Ӓ Ϡ � Hexadecimal: " ആ ಫ HTML display:
Entity: & © Æ Ď ¾ ℋ ⅆ ∲ ≧̸
Decimal: # Ӓ Ϡ �
Hexadecimal: " ആ ಫ
1.14. Horizontal Rules (Thematic Break)
Notes:
Sequence of three or more
-,_, or*charactersA leaf block, it cannot contain other block
Markdown syntax:
HTML code:
Markdown display:
HTML display:
Last updated