Skip to content

Instantly share code, notes, and snippets.

@howar31
Last active July 24, 2023 07:43
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save howar31/5963000 to your computer and use it in GitHub Desktop.
Save howar31/5963000 to your computer and use it in GitHub Desktop.
Markdown Cheatsheet

中文版


This is a fork from https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

Thanks the original author Adam Pritchard for the generous sharing!


This is intended as a quick reference and showcase. For more complete info, see John Gruber's original spec and the Github-flavored Markdown info page.

Note that there is also a Cheatsheet specific to Markdown Here if that's what you're looking for.

You can play around with Markdown on our live demo page.

Table of Contents

Headers
Emphasis
Lists
Links
Images
Code and Syntax Highlighting
Tables
Blockquotes
Inline HTML
Horizontal Rule
Line Breaks
Youtube videos

## Headers
# H1
## H2
### H3
#### H4
##### H5
###### H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1
======

Alt-H2
------

H2

H3

H4

H5
H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

## Emphasis
Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.

Strikethrough uses two tildes. ~~Scratch this.~~

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

## Lists
1. First ordered list item
2. Another item
  * Unordered sub-list. 
1. Actual numbers don't matter, just that it's a number
  1. Ordered sub-list
4. And another item.  
   
   Some text that should be aligned with the above item.

* Unordered list can use asterisks
- Or minuses
+ Or pluses
  1. First ordered list item
  2. Another item
  • Unordered sub-list.
  1. Actual numbers don't matter, just that it's a number

  2. Ordered sub-list

  3. And another item.

    Some text that should be aligned with the above item.

  • Unordered list can use asterisks
  • Or minuses
  • Or pluses
## Links

There are two ways to create links.

[I'm an inline-style link](https://www.google.com)

[I'm a reference-style link][Arbitrary case-insensitive reference text]

[I'm a relative reference to a repository file](../blob/master/LICENSE)

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself][]

Some text to show that the reference links can follow later.

[arbitrary case-insensitive reference text]: https://www.mozilla.org
[1]: http://slashdot.org
[link text itself]: http://www.reddit.com

I'm an inline-style link

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself

Some text to show that the reference links can follow later.

## Images
Here's our logo (hover to see the title text):

Inline-style: 
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

Here's our logo (hover to see the title text):

Inline-style: alt text

Reference-style: alt text

## Code and Syntax Highlighting

Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and Markdown Here -- support syntax highlighting. Markdown Here supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the highlight.js demo page.

Inline `code` has `back-ticks around` it.

Inline code has back-ticks around it.

Blocks of code are either fenced by lines with three back-ticks ```, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.

 ```javascript
 var s = "JavaScript syntax highlighting";
 alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
No language indicated, so no syntax highlighting in Markdown Here (varies on Github). 
But let's throw in a <b>tag</b>.

(Github Wiki pages don't seem to support syntax highlighting, so the above won't be colourful (the strings are not red, for example). Try it out in a Markdown Here email or a Github Markdown README or Github Issue -- you can preview a new Issue without submitting it.)

Again, to see what languages are available for highlighting, and how to write those language names, see the highlight.js demo page.

## Tables

Tables aren't part of the core Markdown spec, but they are part of GFM and Markdown Here supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.

Colons can be used to align columns.

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3

Colons can be used to align columns.

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown Less Pretty
Still renders nicely
1 2 3
## Blockquotes
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote. 

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

## Inline HTML

You can also use raw HTML in your Markdown, and it'll mostly work pretty well.

<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>
Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.
## Horizontal Rule
Three or more...

---

Hyphens

***

Asterisks

___

Underscores

Three or more...


Hyphens


Asterisks


Underscores

## Line Breaks

My basic recommendation for learning how line breaks work is to experiment and discover -- hit <Enter> once (i.e., insert one newline), then hit it twice (i.e., insert two newlines), see what happens. You'll soon learn to get what you want. "Markdown Toggle" is your friend.

Here are some things to try out:

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a *separate paragraph*.

This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also begins a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.

(Technical note: Markdown Here uses GFM line breaks, so there's no need to use MD's two-space line breaks.)

## Youtube videos

They can't be added directly but you can add an image with a link to the video like this:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

Or, in pure Markdown, but losing the image sizing and border:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

English Version


本篇fork自 https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

感謝原作者 Adam Pritchard 慷慨分享!

--

此篇為Markdown快速參考指南與效果展示,更多詳細資訊,請參考 John Gruber's original spec 以及 Github-flavored Markdown info page

提醒您,這邊還有另一篇可能是您要找的 Cheatsheet specific to Markdown Here

您可以在我們的 Live Demo 網頁 測試各種Markdown語言。

目錄

標題
字體標記
列表
連結
圖片
程式碼與語法高亮標記
表格
引文
內嵌HTML
水平分隔線
換行
YouTube影片

## 標題
# H1
## H2
### H3
#### H4
##### H5
###### H6

H1和H2標題可以使用另一種底線方式標注:

Alt-H1
======

Alt-H2
------

H2

H3

H4

H5
H6

H1和H2標題可以使用另一種底線方式標注:

Alt-H1

Alt-H2

## 字體標記
強調,又稱斜體,使用 *星號* 或 _底線_ 。

重點強調,又稱粗體,使用兩個 **星號** 或 __底線__ 。

也可以混合使用 **星號 與 _底線_** 。

刪除線使用兩個波浪符號。 ~~刪除這句話~~

強調,又稱斜體,使用 星號底線

重點強調,又稱粗體,使用兩個 星號底線

也可以混合使用 星號 與 底線

刪除線使用兩個波浪符號。 刪除這句話

## 列表
1. 第一個有序項目
2. 另一個項目
  * 無序子項目 
1. 數字多少不重要,只要是個數字就行
  1. 有序子項目
4. 另一個項目  
   
   有些文字必須要與上面對齊

* 無序項目可以使用星號
- 或是減號
+ 或是加號
  1. 第一個有序項目
  2. 另一個項目
  • 無序子項目
  1. 數字多少不重要,只要是個數字就行

  2. 有序子項目

  3. 另一個項目

    有些文字必須要與上面對齊

  • 無序項目可以使用星號
  • 或是減號
  • 或是加號
## 連結

有兩種方式產生連結

[我是內文式連結](https://www.google.com)

[我是參照式連節][Arbitrary case-insensitive reference text 不分大小寫]

[我是使用相對位置的參照式連結](../blob/master/LICENSE)

[你可以用數字來定義參照式連結的網址][1]

或是留空白來直接使用 [連結文字作為參照][]

參照連結前面可以插入其他文字

[arbitrary case-insensitive reference text 不分大小寫]: https://www.mozilla.org
[1]: http://slashdot.org
[連結文字作為參照]: http://www.reddit.com

我是內文式連結

我是參照式連節

我是使用相對位置的參照式連結

你可以用數字來定義參照式連結的網址

或是留空白來直接使用 連結文字作為參照

參照連結前面可以插入其他文字

## 圖片
這是範例Logo (滑鼠指上去以顯示說明文字):

內文式: 
![替代文字](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "說明文字1")

參照式: 
![替代文字][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "說明文字2"

這是範例Logo (滑鼠指上去以顯示說明文字):

內文式: 替代文字

參照式: 替代文字

## 程式碼與語法高亮標記

程式碼區塊是Markdown的特色之一但是語法高亮標記卻不是,但是還是有很多的服務 -- 例如 GitHub 和 Markdown Here -- 支援語法高亮標記功能, Markdown Here 的語法高亮標記支援數十種語言 (也包含「類語言」,例如 diffs 和d HTTP headers),完整的支援列表與使用方式,請見 highlight.js demo page.

內文式 `程式碼` 使用 `back-ticks 包著` 。

內文式 程式碼 使用 back-ticks 包著

程式碼區塊使用一行三個 back-ticks ``` 包起來,或內縮四個空白,我個人建議只使用back-ticks包起來 -- 這樣更清楚簡單,且支援語法高亮標記功能。

 ```javascript
 var s = "JavaScript syntax highlighting";
 alert(s);
s = "Python syntax highlighting"
print s
沒有指定語言,所以沒有語法高亮標記。
但會包進一個 <b>tag</b> 裡面。

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
s = "Python syntax highlighting"
print s
沒有指定語言,所以沒有語法高亮標記。
但會包進一個 <b>tag</b> 裡面。

(Github Wiki pages 似乎不支援語法高亮標記功能,所以上面的程式碼並沒有上色 (例如strings沒有變紅色)。想嘗試這項功能,可以到 Markdown Here email 或 Github Markdown README 或 Github Issue -- 可以直接預覽新的 Issue 而不用 submit。)

再次說明,完整的高亮語言支援列表以及撰寫方式,請見 highlight.js demo page.

## 表格

表格不是Markdown語言的標準規範,但是 GFM 和 Markdown Here 支援表格呈現,這功能讓你可以很輕鬆的直接建立表格 -- 而不需要從其他程式建好再複製過來。

冒號可以用來設定表格欄位對齊方式

| 表格          | 很            | 酷!  |
| ------------- |:-------------:| -----:|
| 第三欄是      | 靠右對齊      | $1600 |
| 第二欄是      | 置中          |   $12 |
| 格線          | 很整齊        |    $1 |

最外圍的垂直線 (|) 不一定要有,而且原始的 Markdown 表格也不一定要完美漂亮的對齊,表格中也可以穿插 Markdown 語法。

Markdown | 有點 | 亂
--- | --- | ---
*結果* | `還是` | **很漂亮**
1 | 2 | 3

冒號可以用來設定表格欄位對齊方式

表格 酷!
第三欄是 靠右對齊 $1600
第二欄是 置中 $12
格線 很整齊 $1

最外圍的垂直線 (|) 不一定要有,而且原始的 Markdown 表格也不一定要完美漂亮的對齊,表格中也可以穿插 Markdown 語法。

Markdown 有點
結果 還是 很漂亮
1 2 3
## 引文
> 引文可以很方便地在email中模擬回文格式。
> 這行是同一個引文的內容。

引文中斷。

> 這是一行非常長的文字,但在自動換行的時候還是可以正確的套用引文格式,喔天啊讓我們繼續來講些東西確保這行文字在每個人的螢幕顯示中都會需要換行,喔,你可以在引文中 *使用* **Markdown** 語法。

引文可以很方便地在email中模擬回文格式。 這行是同一個引文的內容。

引文中斷。

這是一行非常長的文字,但在自動換行的時候還是可以正確的套用引文格式,喔天啊讓我們繼續來講些東西確保這行文字在每個人的螢幕顯示中都會需要換行,喔,你可以在引文中 使用 Markdown 語法。

## 內嵌HTML

你可以在 Markdown 中使用原始 HTML 語言,大部份都會正確顯示。

<dl>
  <dt>Definition list</dt>
  <dd>是人們有時候會使用的東西。</dd>

  <dt>HTML 中使用 Markdown</dt>
  <dd>*無法* **正確** 顯示。請使用 HTML <em>tags</em>。</dd>
</dl>
Definition list
是人們有時候會使用的東西。
HTML 中使用 Markdown
*無法* **正確** 顯示。請使用 HTML tags
## 水平分隔線
三個以上的...

---

連字號

***

星號

___

底線

三個以上的...


連字號


星號


底線

## 換行

學習換行該如何撰寫,我個人推薦直接試試看就知道了 -- 按一下 <Enter> 鍵 (也就是插入新的一行) ,然後按兩下 (也就是插入兩行) ,看看有什麼不同。你很快的就會知道該如何得到你想要的效果,「Markdown Toggle」是你的好朋友。

試試看下面這些:

我們從這行開始。

這行與上面一行字中間空一行,所以會顯示為 *新的段落* 。

這行也是一個新的段落,但是...
這行與上一行中間無空行,所以他被放在 *同一個段落* 。

我們從這行開始。

這行與上面一行字中間空一行,所以會顯示為 新的段落

這行也是一個新的段落,但是... 這行與上一行中間無空行,所以他被放在 同一個段落

(小技巧: Markdown Here 使用 GFM 換行風格,所以不需要使用MD的兩格換行。)

## YouTube影片

他們不能直接加入文章中,但你可以改用預覽圖加連結的方式呈現,像這樣:

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

或是,只使用純Markdown語法,但無法調整圖片大小與邊框:

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment