标记语言 (ML, Markup Language) 横向对比

References

• Markdown versus HTML
• MarkDown and HTML Comparison
• How do I use Markdown? - IBM
• commonmark.org/help/
• Markdown - Learn The Web
• Markdown Guide

Tools

• commonmark.js dingus

共同特性

1. Markup languages. 标记语言
2. Format plain text. 使文本格式化

Formatting elements 横向对比

Markdown	HTML
easier	-
-	more expressive
-	Semantic tags and tagging.
Formatting elements, Markdown syntax elements	HTML tags

Headings, Headers 标题

MarkdownHTML

Markdown: `#` hash tag/symbol

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

OR

Heading 1
=========
Heading 2
---------

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs 段落

MarkdownHTML

Markdown

This is the first paragraph.

This is the second paragraph of text.

This is the first paragraph.

This is the second paragraph of text.

HTML

<p>This is a paragraph.</p>

This is a paragraph.

Bulleted Lists 列表

Abstract

1. Ordered list 有序列表
2. Unordered list 无序列表
3. Definition list 定义列表

---

• Nested list
• Task list

x.1 Ordered list 有序列表

MarkdownHTML

Markdown

1. First Item
2. Second Item
3. Third Item

1. First Item
2. Second Item
3. Third Item

HTML

<ol>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>

1. First Item
2. Second Item
3. Third Item

x.2 Unordered list 无序列表

MarkdownHTML

Markdown: `-`, `+`, `*`

- First Item
- Second Item
- Third Item

OR

* First Item
* Second Item
* Third Item

OR

+ First Item
+ Second Item
+ Third Item

• First Item
• Second Item
• Third Item

OR

• First Item
• Second Item
• Third Item

OR

• First Item
• Second Item
• Third Item

HTML

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ul>

• First Item
• Second Item
• Third Item

x.3 Definition list 定义列表

MarkdownHTML

Markdown

First Term
: Definition of first term.

Second Term
: Definition of second term.
: Another definition.

First Term

Definition of first term.

Second Term

Definition of second term.

Another definition.

HTML

<dl>
  <dt>First Term</dt>
  <dd>Definition of first term.</dd>
  <dt>Second Term</dt>
  <dd>Definition of second term.</dd>
  <dd>Another definition.</dd>
</dl>

First Term

Definition of first term.

Second Term

Definition of second term.

Another definition.

y.1 Nested List 嵌套列表

Dots indicate leading spaces.

Markdown

1. Numbered Item
..* Bulleted Item
..* Bulleted Item
2. Numbered Item

y.2 M: Task List (Checklist)

Dots indicate spaces.

Markdown

[ ] Unchecked Item
[x] Checked Item

Blockquotes 块引用

Markdown

> This is a quote.
>> Nested blockquote.

HTML

<blockquote>This is a quote.</blockquote>

Code

Abstract

1. Inline Code 内联代码
2. Code Blocks 代码块

Inline Code 内联代码

MarkdownHTML

Markdown

Execute command `nano`.
This is an example of `inline code`
`Inline code` with backticks

HTML

execute command <code>nano</code>

Code Blocks 代码块

Dots indicate leading spaces.

MarkdownHTML

Markdown

```
This is a fenced code block.
# code block
print '3 backticks or'
print 'indent 4 spaces'
```

····# code block
····print '3 backticks or'
····print 'indent 4 spaces'

HTML

<pre>
  <code>
  function test() {
    console.log("html");
  }
  </code>
</pre>

Table 表格

Tables	Are	Cool
col 1 is	left-aligned	$100
col 2 is	centered	$52
col 3 is	right-aligned	$9

Markdown

 Header 1 | Header 2 
----------|----------
 Cell 11  | Cell 12  
 Cell 21  | Cell 22  

|  Tables  |      Are      | Cool |
|----------|:-------------:|-----:|
| col 1 is |  left-aligned | $100 |
| col 2 is |    centered   |  $52 |
| col 3 is | right-aligned |   $9 |

HTML

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 11</td>
      <td>Cell 12</td>
    </tr>
    <tr>
      <td>Cell 21</td>
      <td>Cell 22</td>
    </tr>
  </tbody>
</table>

Image 图片

Markdown

![Alt Text](http://url/a.png)
![Alt Text](/path/to/b.png "Title")

OR

![Alt Text][1]
⋮
[1]: http://url/c.jpg

HTML

<img src="/path/to/image.png" alt="image">

URLs, Links 超链接

Markdown

[Link Text](http://a.com/)

OR

[Link Text][1]
⋮
[1]: http://b.org

HTML

<a href="http://a.com/">Link Text</a>

Emphasis

Italic 斜体

A single set of asterisks.

Markdown

I am *italic*
I am _Italic_

HTML

I am <i>italic</i>

Bold 粗体

Double asterisks.

Markdown

I am **bold**
I am __bold__

HTML

I am <b>bold</b>

Strikethrough

Markdown

I am ~~strikethrough~~

HTML

I am <del>strikethrough</del>

Underlined

This was inserted

Markdown

^^This was inserted^^

HTML

<ins>This was inserted</ins>

Text Highlighting

Text to be highlighted

Markdown

==Text to be highlighted==

HTML

<mark>Text to be highlighted</mark>

Superscript and Subscript

32^nd

H₂O

Markdown

32^nd^
H~2~O

HTML

<p>
  32<sup>nd</sup>
</p>
<p>
  H<sub>2</sub>O
</p>

Horizontal Rule 水平分割线

MarkdownHTML

Markdown

---
***
___

---

---

---

HTML

<hr/>

---

Markdown 独占格式

Footnotes

Question

在 HTML 中如何实现 footnotes 的效果？

Sentence with a footnote label ¹.

markdown

Sentence with a footnote label. [^1]
⋮
[^1]: Foodnote content.

Footnote **Reference**

[^1]

Footnote **Content**

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

Escaping Characters

Markdown

\*don't italicize this\*

Emojis and Emoticons

Here's our favorite emoji cheat sheet.

Markdown

:honeybee:
:)

Typographic Replacements

Markdown

--
---
(C)
(R)
(TM)
(P)
+-
' '
'' ''

Keyboard Keys

Ctrl+Alt+Del

Markdown

++ctrl+alt+del++

---

1. Foodnote content. ↩