溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Markdown怎么使用

發(fā)布時間:2022-01-10 11:02:55 來源:億速云 閱讀:135 作者:iii 欄目:編程語言

這篇“Markdown怎么使用”文章的知識點(diǎn)大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“Markdown怎么使用”文章吧。

HTML 以 <!-- 開頭,以 --> 結(jié)尾的閉包定義注釋(支持跨行),不在正文中顯示。 
Markdown 沿用  HTML Comment  注釋格式: 
<!-- This text will not appear in the browser window. --> 

注釋適用場景示例:

  1. CSDN 博客默認(rèn)會在網(wǎng)頁生成TOC,而 GitHub 仍不支持[TOC],因此在發(fā)布 Markdown 博客時可注釋掉開頭的 [TOC] 標(biāo)簽,在需要查看 OUTLINE 時再打開。 
    <!--[TOC]-->

  2. 在博客 Markdown 源碼開頭,本人通常使用注釋來備注 git commit-hash-id 和 commit-date 信息(git log -p ),以便修訂變更時回溯。 
    <!--commit 5326f29752b7ee3472aa00b40574bd585e3ef25b--> 
    <!--Mon Nov 2 00:36:40 2015 +0800-->

  3. 在使用 Markdown 寫作博客時,本人喜歡采用參考式鏈接,然后在文末專門開辟一節(jié)用于定義文中用到的所有腳注和參考鏈接。借助 Haroopad/FoldingText/Marked2 的折疊特性,本人習(xí)慣在末尾添加一行 Comment Heading,用于在閱讀 Markdown 源碼時折疊隱藏文末的參考區(qū)。 
    ##<!--以下是本文的腳注和超鏈接-->

標(biāo)題(Header)1

標(biāo)題用于呈現(xiàn)文檔組織結(jié)構(gòu),很多 Markdown 解析器都提供基于 Heading Levels 來生成文檔大綱的 [TOC](Table of Contents)標(biāo)簽,搜索引擎則使用標(biāo)題為網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。 

Markdown 支持兩種標(biāo)題的語法,類  Setext  和類  atx  形式。

Setext Heading Format(2 level)

類 Setext 形式是用底線的形式,使用三個或以上連續(xù) =(equal signs)底線標(biāo)記最高階標(biāo)題,使用三個或以上連續(xù) -(dashes)底線標(biāo)記第二階標(biāo)題。例如:

  1. equal signs for first-level headers:

    This is an H1    ===12
  1. dashes for second-level headers:

    This is an H2    ----12

Atx Heading Format(6 level)

類 Atx 形式則是在行首插入 1 到 6 個 # (hash character),對應(yīng) 6 階標(biāo)題(對應(yīng) HTML 中的 <h2> - <h7> 標(biāo)簽)。例如:

# 這是一級標(biāo)題(H1,通常用于文檔標(biāo)題)  
## 這是二級標(biāo)題(H2,有些渲染器會為二級標(biāo)題添加 hr 底線)  
### 這是三級標(biāo)題(H3)  
#### 這是四級標(biāo)題(H4)  
##### 這是五級標(biāo)題(H5)#####  
###### 這是六級標(biāo)題(H6)######1234567

行首的 # 號個數(shù)決定標(biāo)題階數(shù),為兼容和閱感起見,建議最后一個 # 號和標(biāo)題文字之間加插一個空格。 
行中(末)的 # 號則被視作普通字符。為美觀起見,你也可以選擇性地「閉合」類 atx 樣式的標(biāo)題,在行尾加上對應(yīng)或不限數(shù)量的 # 號。

句段(Sentence / Paragraph)

換行

標(biāo)準(zhǔn) Markdown 不支持自然換行(literal new line),有些渲染器擴(kuò)展支持自然換行。 
# 號標(biāo)識的 Heading(H1-H6) 會自然換行,普通句段之間若要強(qiáng)制換行(Manual Line Break),可以在自然換行行尾追加兩個(或以上)空格來實(shí)現(xiàn)。 
由于不同的 Markdown Editor 的渲染效果不一,建議按照標(biāo)準(zhǔn) Markdown 書寫,這樣發(fā)布到不同的渲染引擎下才能取得最優(yōu)的兼容性。例如:你可能需要在兩行連續(xù)的以 > 開頭的引用之間加入兩個空格硬換行來避免粘連;在某些 Markdown Editor 中,你可能需要在 bullet list item 行尾追加兩個空格硬換行來續(xù)接后面的混合編排。

適時內(nèi)嵌 HTML 的 <br> 控制換行

由于空格在 Markdown 中主要是起著控制排版的作用,因此在某些復(fù)雜的區(qū)塊元素中,例如下文提到的 Table 表格中的 td 元素中,只能通過內(nèi)嵌 HTML 的<br>(XHTML 自閉合寫作 <br />)標(biāo)簽來實(shí)現(xiàn)局部換行。

分段

段落是由一個或多個連續(xù)的文本行組成,它的前后往往需要空行予以明示分隔。

在顯示上看起來像是空的,例如只包含空格或(和)制表符(tab)的行,便會被視為空行。

空行適用場景說明:

  1. 空行的上一句末無需再添加兩個空格或 <br/> 換行了。

  2. 句段之間引入空行,相當(dāng)于間隔成段落(對應(yīng) HTML 的 <p> 標(biāo)簽)。

  3. 盡管 Markdown Render 會對各階 Heading(H1-H6)有特殊的格式渲染來凸顯層級,但還是建議在章節(jié)(Section/Chapter)末尾適時插入空行,以示行文分割且方便閱讀。

  4. 為了更優(yōu)的 閱讀感 和 兼容性,建議在分割線(Horizontal Rules)的上面留一空行,塊引用(Blockquote)、預(yù)格式化(Preformatted Code Block)、列表(List)、表格(Table)等區(qū)塊元素的上下各插入空行。

符號(Punctuation Characters)

轉(zhuǎn)義字符

Markdown 精挑細(xì)選了一些符號組成了一套基于文本的標(biāo)記語法。比如:

  • 在文字兩旁加上 * 號,看起來就像*強(qiáng)調(diào)*。

  • 多行行首添加 +(或 - 或 *),看起來就是列表。

  • 句段行首添加 > 號來引用區(qū)塊,就像你曾在電子郵件中見過的那樣。

可以使用反斜杠(\,backslash)轉(zhuǎn)義輸入 Markdown 標(biāo)記符號的原義字符。


#:行首的 #(此處使用 kbd 閉包顯示按鍵字幕)號默認(rèn)為H1,這里使用反斜杠轉(zhuǎn)義顯示原義字符。

字符實(shí)體

在 Markdown 中,空格和 tab 往往用于格式控制,例如:

  • 行首插入 tab 或 四個空格 縮進(jìn)表示 <pre> 預(yù)格式化;

  • 引用、列表的 bullet 標(biāo)記符前的 tab 或 空格 用于縮進(jìn)嵌套層級;

普通段落一般都是頂格開始,無法使用 空格 或 tab 來縮進(jìn),包括引用標(biāo)記符(>)、列表標(biāo)記符(bullet list indicator)后面的空格都無法實(shí)現(xiàn)縮進(jìn)。 
如果硬要輸入空格顯示占位縮進(jìn)效果,可以嵌入空格對應(yīng)的  HTML Entity  實(shí)體碼。HTML 轉(zhuǎn)義字符串(Escape Sequence),即字符實(shí)體(Character Entity)。字符實(shí)體由三部分構(gòu)成:

  1. 第一部分是一個 & (ampersand)符號;

  2. 第二部分是實(shí)體(Entity)名字;或者 # 加上實(shí)體編號( Entity Code );

  3. 第三部分是一個分號 ; (semicolon)。

HTML提供了5種空格實(shí)體 ( space entity ),它們擁有不同的寬度,非斷行空格(&nbsp;)是常規(guī)空格的寬度,可運(yùn)行于所有主流瀏覽器。其他幾種空格( &ensp;、&emsp;&thinsp;、&zwnj;&zwj;)在不同瀏覽器中寬度各異。

entitycodefull-namewidth
&nbsp;&#160;no-break space鍵盤空格(space bar)
&ensp;&#8194;en space半角空格(half-width)
&emsp;&#8195;em space全角空格(full-width)

1. 在HTML中,使用&nbsp;產(chǎn)生的空格是不會累加的(只算1個);要使用html實(shí)體表示才可累加。 
2. &ensp;中的en是字體排印學(xué)的計(jì)量單位,為em寬度的一半,名義上是小寫字母n的寬度。此空格傳承空格家族一貫的特性:透明的!此空格有個相當(dāng)穩(wěn)健的特性,就是其占據(jù)的寬度正好是1/2個中文寬度,而且基本上不受字體影響。 
3. &emsp;中的em是字體排印學(xué)的計(jì)量單位,相當(dāng)于當(dāng)前指定的點(diǎn)數(shù)。此空格也傳承空格家族一貫的特性:透明的!此空格也有個相當(dāng)穩(wěn)健的特性,就是其占據(jù)的寬度正好是1個中文寬度,而且基本上不受字體影響。


普通自然行行首敲2個空格無占位縮進(jìn)效果。 
    該行行首添加了4個&nbsp;。 
????該行行首添加了4個&ensp;。 
????該行行首添加了4個&emsp;。

分隔線(Horizontal Rules)

你可以在一行中用三個以上的星號(asterisks:*)或減號(hyphens:-)或底線(underscores:_)來建立一個水平分隔線,對應(yīng) HTML 中的 <hr> 標(biāo)簽,用于Sentence/Section/Page Break。 
行內(nèi)不能有其他東西,但你可以在星號或是減號中間插入空格。 
下面每種寫法都可以建立起分隔線:

---
- - -
-----1234

注意:

采用減號(-)分割時,最好空格隔開或上面空一行,不然三個以上連續(xù)的減號會誤將上一行文字升級為二級標(biāo)題!

文本格式(Text Styling)

文本格式包括強(qiáng)調(diào)、加粗、突出、下劃線、刪除線、腳標(biāo)等增強(qiáng)修飾和豐富表現(xiàn)。

強(qiáng)調(diào)(Italic/Emphasize)

說明: 
星號(*)或下劃線(_)包圍的文字將會顯示斜體,對應(yīng) HTML 中的 <i> / <em> 標(biāo)簽。

語法:

Some of these words *are emphasized*.
Some of these words _are emphasized also_.12

示例: 
Some of these words are emphasized
Some of these words are emphasized also.

GFM( Github Flavored Markdown )建議:

鑒于C語言等源碼中,通常采用下劃線定義變量,因此 GFM 忽略單詞內(nèi)的下劃線,同時建議使用星號(*)來包裹斜體。

下劃線閉包單詞斜體:wow great stuff (源碼:wow _great_ stuff
GFM 忽略單詞內(nèi)的下劃線:wow_great_stuff

加粗(Bold/Strong)

說明: 
兩個星號(**)或下劃線(__)包圍的需要特別強(qiáng)調(diào)的文字將會加粗顯示,對應(yīng) HTML 中的 <b> / <strong> 標(biāo)簽。

語法:

Use two asterisks for **strong emphasis**.
Or, if you prefer, __use two underscores instead__.
A ***section surrounded with three asterisks*** will be  specially emphasized.123

示例: 
Use two asterisks for strong emphasis. 
Or, if you prefer, use two underscores instead. 
section surrounded with three asterisks will be specially emphasized.

突出(Mark/Highlight)

說明: 
在 HTML 中,可以使用 <mark> 標(biāo)簽來高亮顯示文字,以達(dá)到醒目的目的。 
標(biāo)準(zhǔn) markdown 沒有提供對應(yīng)的標(biāo)簽支持,Macdown 和 Haroopad 均使用兩個等號(equal signs:=)包圍來突出高亮顯示。

語法: 
Macdown 和 Haroopad:==Highlight== 
CriticMarkup 語法:{==Highlight==}

示例: 
Macdown 和 Haroopad:==Highlight==

下劃線(Underline)

說明: 
在 HTML 中,可以使用 <u> 標(biāo)簽來為文本添加下劃線。 
標(biāo)準(zhǔn) markdown 沒有提供對應(yīng)的標(biāo)簽支持,MMD( MultiMarkdown )提供了擴(kuò)展支持。 
Macdown 使用星號表示強(qiáng)調(diào),使用下劃線表示下劃線原義;Haroopad 則使用兩個加號(plus sign:+)來標(biāo)記下劃線。

語法: 
Macdown:_underline_ 
Haroopad:++underline++

示例: 
Macdown:underline 
Haroopad:++underline++

刪除線(Strikethrough)

說明: 
在 HTML 中,可以使用 <del> 標(biāo)簽來定義文檔中已被刪除的文本(配合 <ins> 標(biāo)簽來描述文檔中的更新和修正)。 
標(biāo)準(zhǔn) markdown 沒有提供對應(yīng)的標(biāo)簽支持,GFM 提供了擴(kuò)展支持,使用兩個波浪符號(two wavy line:~~)包圍來給文本添加刪除線。

語法:

~~Strikethrough~~12

示例: 
Strikethrough

腳標(biāo)(Script)

標(biāo)準(zhǔn) Markdown 不支持腳標(biāo),只能通過內(nèi)嵌 HTML 的<sup><sub>標(biāo)簽來實(shí)現(xiàn)。

上腳標(biāo):

Haroopad 語法(Caret):^Superscript^ 
HTML 語法:<sup>superscript</sup>

示例: 
2^10^ = 210 = 1024;

下腳標(biāo):

Haroopad 語法:~Subscript~ 
HTML 語法:<sub>subscript</sub>

示例: 
H~2~O = H2O is a liquid.

鏈接(Hyperlink)

自動鏈接(Autolink)

當(dāng)我們在書寫一個網(wǎng)址時,有些 Markdown Render 能自動生成標(biāo)題(title)與網(wǎng)址(href URL)一致的鏈接,這種鏈接也即自動鏈接。 
Markdown 支持以比較簡短的自動鏈接形式來處理網(wǎng)址和電子郵件信箱,只要用尖括號包起來的文字, Markdown 就會自動識別轉(zhuǎn)化成鏈接。 
對于 HTTP(s) 協(xié)議開頭的超鏈接地址,甚至無需添加尖括號明示,也會生成自動鏈接。

http://daringfireball.net/projects/markdown/

文字(text href)

Markdown 支持兩種形式的超文本鏈接語法格式: 行內(nèi)式(Inline)和參考式(Reference)兩種形式。 
不管是哪一種,鏈接文字都是用方括號(square brackets:[])來標(biāo)記。

行內(nèi)式(Inline)

只要在方塊括號后面緊接著圓括號(parenthesis or round brackets)并插入鏈接網(wǎng)址即可在一行內(nèi)構(gòu)建鏈接,其語法格式為[text](url),HTML 等效源碼為 <a href="url">text</a>。 
如果是要鏈接到本機(jī)資源,可以使用相對路徑(./path/to/your/resource)。

以下定義了一個指向 Daring Fireball Markdown 首頁的超鏈接:


[Daring Fireball Markdown](http://daringfireball.net/projects/markdown/) 
Daring Fireball Markdown


如果你還想要加上鏈接的 title ,只要在網(wǎng)址后面用雙引號把 title 文字包起來即可。


[Daring Fireball Markdown](http://daringfireball.net/projects/markdown/ "Markdown Official Website") 
Daring Fireball Markdown


當(dāng)鼠標(biāo)懸停在超鏈接文本上時,將會提示 “Markdown Official Website”。

參考式(Reference)

參考式的鏈接是在鏈接文字的括號后面再接上另一個方括號,在第二個方括號里面填入用以辨識鏈接的標(biāo)記id,然后在其他地方給出該標(biāo)記id真正的鏈接地址。


  1. 先定義參考refid:[text][refid]

  2. 再定義refid所指:[refid]:URL


以下參考間接定義指向 Daring Fireball Markdown 首頁的超鏈接:


  1. 先定義參考id為markdown_homepage_refid: 
    [Daring Fireball Markdown][markdown_homepage_refid]

  2. 再在其他地方定義markdown_homepage_refid指向的URL: 
    [markdown_homepage_refid]:http://daringfireball.net/projects/markdown/

  3. 最終效果同行內(nèi)式: 
    Daring Fireball Markdown  


說明:

  1. 也可選擇性地在兩個方括號中間加上一個空格:[text] [refid]。由于 Markdown 不支持自然換行,將兩個方括號在連續(xù)兩行書寫也是沒問題的。中間用空行隔開,則被認(rèn)為是兩條精簡格式的參考鏈接。

  2. refid 可以與 text 一致,從而進(jìn)一步精簡參考鏈接的書寫格式: 

    • 此時 [refid] 中的 refid 可以省略置空為 [] :先定義 [text][] ,再定義 [text]:URL 。

    • 你甚至可以將 [text][] 中的空中括號也省掉不寫,進(jìn)一步簡寫為 [text] ,后面再定義 [text]:URL 。

  3. refid 所指 href URL 在文件任意處給出定義即可。[refid]:URL 的 URL 后面可以選擇性地用單引號、雙引號或是括弧閉包起來標(biāo)記 title。 
    下面這三種鏈接的定義都是相同的: 
    [foo]: http://example.com/ "Optional Title Here" 
    [foo]: http://example.com/ 'Optional Title Here' 
    [foo]: http://example.com/ (Optional Title Here)

圖片(image href)

插入圖片

Markdown 使用一種和文本鏈接很相似的語法來插入圖片,同樣也允許兩種樣式: 行內(nèi)式和參考式。 
不同的是,需要在鏈接文字方括號之前添加一個感嘆號(exclamation mark:!),其語法格式為 ![alt_text](url),HTML 等效源碼為 <img src="url" alt="text" />,其中alt_text可以置空。


daringfirefall logo: 
![daringfirefall](http://daringfireball.net/graphics/logos/) 
Markdown怎么使用

當(dāng)然,你也可以像文字鏈接那樣添加 title 以供鼠標(biāo)懸停提示。

說明: 
Markdown 中的段落(包括圖片)默認(rèn)頂格左對齊,若要將圖片居中,可以直接內(nèi)嵌 HTML 的 <img> 標(biāo)簽,設(shè)置align="middle"。如果還不行,可以嘗試封裹一層 div 設(shè)置 style="text-align:center" 實(shí)現(xiàn):

<div style="text-align:center"><img src="http://avatar.csdn.net/9/D/B/1_phunxm.jpg" align="middle"  alt="程序猿-弦苦" /></div>1

Markdown怎么使用

圖片鏈接

如果拷貝了別人的圖片插入到自己的博客中,最好在圖片上給出一個超鏈接指向源頭,方便追溯出處。 
我們在 Markdown 圖片標(biāo)記![]()外面再嵌套一層[]()即可建立圖片超鏈接,點(diǎn)擊圖片即可跳轉(zhuǎn)到鏈接源地址。 
圖片鏈接的格式看起來大概是這樣的: 
[![](img_url)](ref_url)


定義 haroopad logo 指向首頁: 
[![](http://pad.haroopress.com/assets/images/logo-small.png "haroopad")](http://pad.haroopress.com/)

Markdown怎么使用

錨點(diǎn)(inner link)

書簽(Bookmark)

HTML 中的 <a> 標(biāo)簽最重要的屬性是 href ,它指示的鏈接目標(biāo),既可以是外部站點(diǎn),也可以是頁內(nèi)錨點(diǎn)。頁內(nèi)錨點(diǎn)可以實(shí)現(xiàn)類似書簽跳轉(zhuǎn)的功能,最典型的就是點(diǎn)擊 TOC 中的目錄書簽跳轉(zhuǎn)到指定章節(jié)閱讀。 
構(gòu)建頁內(nèi)錨點(diǎn)的語法,類似參考式鏈接:


  1. 先定義錨點(diǎn)id:<a href="#auchor_id">bookmark_text</a>

  2. 再定義一個id為auchor_id的對象(這里以<p>為例):<p id="auchor_id">auchor_text</p>


例如,我們在文末定義了id為end的 EOF(End Of File):<p id="end">The end!</p>,然后通過<a href="#end">Goto the End!</a>指定書簽“Goto the End!”跳轉(zhuǎn)到文末“The End!”處:

Goto the End!

腳注(Footnote)

上面我們定義了書簽 Goto the End! ,點(diǎn)擊該書簽將跳轉(zhuǎn)到文末 id 為 #end 的錨點(diǎn),使得我們能快速翻到文末。那怎么再跳轉(zhuǎn)回剛才書簽所在的閱讀點(diǎn)呢?下面來介紹一下具備回環(huán)跳轉(zhuǎn)效果的腳注。

腳注用于為正文中的某個條目添加補(bǔ)充注釋,對詞條的引文出處進(jìn)行標(biāo)注或?qū)I(yè)術(shù)語予以解釋,跟參考文獻(xiàn)一樣。腳注一般位于文檔的末尾,文內(nèi)則以數(shù)字標(biāo)注。

腳注的寫法和極簡參考式鏈接書寫格式比較類似:


  1. 先在需要腳注的單詞(terminology)后面添加 [^Footnote] : terminology[^Footnote]

  2. 再在文末 glossary 區(qū)域定義腳注(添加注解): [^Footnote]:explanatory notes


以下是本文針對第二章標(biāo)題 “標(biāo)題(Header)”的著色添加的腳注:

## <font color='red'>標(biāo)題(Header)</font>[^Header]
[^Header]:這里的源碼為`<font color='red'>標(biāo)題(Header)</font>`,嘗試使用 font.color 著色。123

說明:

  1. 被添加腳注的詞條后面會出現(xiàn)一個超鏈接數(shù)字(有的渲染為上標(biāo)格式),點(diǎn)擊數(shù)字跳轉(zhuǎn)到文末 glossary 區(qū)域該腳注的定義處。

  2. 文末 glossary 區(qū)域該腳注定義的行尾會添加一個回車符號(?),點(diǎn)擊可回到被標(biāo)注的腳注點(diǎn)。

引用(Blockquote)

HTML 中的 <blockquote> 標(biāo)簽定義摘自另一個源的塊引用。 
<blockquote> 與 </blockquote> 之間的所有文本都會從常規(guī)文本中分離出來,經(jīng)常會在左右兩邊進(jìn)行縮進(jìn),而且有時會使用斜體。也就是說,塊引用擁有它們自己的空間。本文大量使用引用(復(fù)合列表)來標(biāo)識特殊說明或注意事項(xiàng)。

Markdown 標(biāo)記區(qū)塊引用是使用類似 email 的引用方式,在斷好的行前加上 > (more than or greater than sign):

> 愛上一個人  > 戀上一座城12

愛上一個人 
戀上一座城


行首的多重引用標(biāo)記可以實(shí)現(xiàn)嵌套縮進(jìn)效果(注意解夢時需要空行出夢):

> 夢>> 夢中夢
>>> 盜夢空間>
>> 夢中夢> 夢1234567

夢中夢

盜夢空間

夢中夢

說明:

  1. 若使用引用格式插入代碼,行首的縮進(jìn)格式丟失,需要自行補(bǔ)充空格占位符。

  2. 一般不建議使用 blockquote(>)格式引用源代碼,應(yīng)采用 pre 格式引用代碼。

  3. 嵌套深入淺出時,需要添加空行(blank line)或者空引用行(additional levels of >)。

代碼(Code)

如果要標(biāo)記行內(nèi)代碼片段,可以用反引號(backtick quotes)閉包;如果要插入跨行片段或塊,可使用預(yù)格式化語法。 
本文在示范 Markdown 語法源碼時,獨(dú)行單句采用了行內(nèi)代碼格式,跨行代碼片段則采用了代碼塊格式。

行內(nèi)代碼(Inline Code)

說明:

如果要標(biāo)記行內(nèi)代碼片段,可以用反引號(backtick quotes)包裹,對應(yīng) HTML 中的 <code> 標(biāo)簽(把文本變成等寬字體,暗示是源程序代碼)。 
如果要在代碼區(qū)段內(nèi)插入反引號,可以用多個反引號來開啟和結(jié)束代碼區(qū)段。

語法:

Use the `printf()` function.(此處使用了反斜杠轉(zhuǎn)義)

示例:

Use the printf() function.(`printf()`) 
Use the`printf()`function.(“ `printf()` “`)

代碼塊(Code Blocks)

說明:

  • Preformatted Code Block 
    如果要插入跨行片段或塊,且要保持排版樣式(包括空格、換行符和縮進(jìn)),可使用預(yù)格式化引用語法格式。對應(yīng) HTML 中的 <pre> 標(biāo)簽。

  • Fenced Code Block 
    如果要支持編程語言語法高亮,則可以使用 GFM 擴(kuò)展的基于 YAML 2  標(biāo)記語言的 Fenced Code Block 引用語法格式。

語法:

  • Preformatted Code Block 
    在句段的行首插入1個tab 或 4個空格,則表示代碼塊。

  • [Fenced Code Block] 
    在句段行首和行末用三個反引號換行閉包,并在行首三個反引號后添加  YAML  語言標(biāo)識。

languagealiases
Markdown無別名,注意區(qū)分大小寫
HTMLxhtml
JavaScriptjs、node
C無別名,注意區(qū)分大小寫
C++cpp
Objective-Cobj-c、objc、objectivec
VimLvimnvim

示例:


1.Preformatted Code Block

將一段代碼塊整體向右縮進(jìn)(? + ])即可測試。

(1)以tab開頭:

these lines begin with tab will be shown as pre code block.
these lines begin with tab will be shown as pre code block.
these lines begin with tab will be shown as pre code block.1234

(2)以4個空格開頭:

these lines begin with 4 spaces will also be shown as pre code block.
these lines begin with 4 spaces will also be shown as pre code block.
these lines begin with 4 spaces will also be shown as pre code block.1234

注意:

pre 格式存在以下缺陷:

  • 對多tab及空格的縮進(jìn)支持不完善!

  • 將宏符號#(#include、#import)誤解為H1,可能會影響解析器的TOC!

  • 將頂格空白行(包括行首帶tab)誤認(rèn)為Paragraph Break,而割斷代碼塊成片段!


2.Fenced Code Block

Fenced Code Block 以三個反引號(backtick quotes:`,有的支持波浪線\~)包裹,第一行的三個反引號之后可以冠上編程語言的 YAML 標(biāo)記識別語法高亮。

  • 以下演示插入一句 python 代碼:

首行(三個反引號開頭):“`python 
中間:print(‘Hello world!’) 
末行(三個反引號結(jié)尾):“`

print('Hello world!')1
  • 以下演示插入一段 Objective-C 代碼:

首行:“`obj-c 
中間:Objective-C Code Block 
末行:“`

////  main.m//  EmptyApplication////  Created by faner on 15/9/5.//  Copyright ? 2015年 faner. All rights reserved.//#import <UIKit/UIKit.h>
#import "AppDelegate.h"int main(int argc, char * argv[]) {    @autoreleasepool {        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
    }
}12345678910111213141516

注意:

  1. Haroopad 編輯器將上述代碼中的#import的第一個有效字符#誤解為 H1 ,導(dǎo)致 TOC 錯亂或 Heading Focus Folding 失效。此時,可嘗試在 Fenced Code Block 行首添加空格或 tab 縮進(jìn)。

  2. 關(guān)于 GitHub 配置 Fenced Code Block 語法高亮所使用的 YAML 標(biāo)記 ,可參考  初探Y(jié)AML 、 YAML學(xué)習(xí) 、 YAML學(xué)習(xí)總結(jié) 、 YAML–想要愛你很容易 。

列表(List)

GFM 等 Markdown 擴(kuò)展支持和無序列表、有序列表和任務(wù)列表。

無序列表(Unordered List)

無序列表(unordered, bulleted)項(xiàng)目的行首使用星號(或加號,或減號)加空格作為列表標(biāo)記(list markers):

- bullet list item 1 begin with a hyphens '-'+ bullet list item 2 begin with a pluses '+'* bullet list item 3 begin with an asterisks '*'123

示例效果:

  • bullet list item 1 begin with a ‘-‘

  • bullet list item 2 begin with a ‘+’

  • bullet list item 3 begin with a ‘*’

通過在列表標(biāo)記前面增加 tab 階次來實(shí)現(xiàn)嵌套效果(nested list)。 
以下是針對本文 TOC 中【鏈接】這一章節(jié)的目錄:

- 鏈接(Hyperlink)    - 自動鏈接(Autolink) <!--行首縮進(jìn)1個tab-->    - 文字(text href)        - 行內(nèi)式(Inline) <!--行首縮進(jìn)2個tab-->        - 參考式(Reference)    - 圖片(image href)        - 插入圖片        - 圖片鏈接    - 錨點(diǎn)(inner link)        - 書簽(Bookmark)        - 腳注(Footnote)- 引用(Blockquote)123456789101112

  • 鏈接(Hyperlink) 

    • 書簽(Bookmark)

    • 腳注(Footnote)

    • 插入圖片

    • 圖片鏈接

    • 行內(nèi)式(Inline)

    • 參考式(Reference)

    • 自動鏈接(Autolink)

    • 文字(text href) 

    • 圖片(image href) 

    • 錨點(diǎn)(inner link) 

  • 引用(Blockquote)

縮進(jìn)控制符:空格 or TAB?

  1. 在列表標(biāo)記前面插入空格也可以實(shí)現(xiàn)縮進(jìn)控制嵌套效果,但不同的 Markdown Render 對控制層級的空格個數(shù)要求不一。

  2. 為了取得最佳的兼容性,建議使用 tab 來控制嵌套層級(nested hierarchy),以期在不同的渲染引擎下都能達(dá)到預(yù)期的顯示效果。當(dāng)然,前提是使用 hard tabs(tab characters),而非 soft tabs(spaces)。

有序列表(Ordered List)

有序列表(ordered / numbered)項(xiàng)目的行首則使用數(shù)字接一個英文句點(diǎn)標(biāo)記(use numbers followed by periods):

1. GETTING STARTED  
    Choosing Blogging Platform (WordPress)2. GETTING YOUR BLOG ONLINE  
    Choosing Domain Name & Web Hosting3. DESIGNING AND TWEAKING YOUR BLOG  
    Quick and easy ways to get your blog look the way you want4. WRITING BLOG POSTS AND PAGES  
    Adding new content for your Blog (Posts, Pages, Images etc…)12345678

Step-by-step walkthrough for starting a blog :

  1. GETTING STARTED 
    Choosing Blogging Platform (WordPress)

  2. GETTING YOUR BLOG ONLINE 
    Choosing Domain Name & Web Hosting

  3. DESIGNING AND TWEAKING YOUR BLOG 
    Quick and easy ways to get your blog look the way you want

  4. WRITING BLOG POSTS AND PAGES 
    Adding new content for your Blog (Posts, Pages, Images etc…)

有序列表和無序列表可以實(shí)現(xiàn)混合嵌套編排。

任務(wù)列表(Task Lit)

GFM 擴(kuò)展支持把列表變成帶勾選框的任務(wù)列表,只需要在列表標(biāo)記后添加[ ]標(biāo)記?表示unchecked,在中括號中填寫x([x])標(biāo)記??表示checked(filled)。

- [ ] task1 to do- [x] task2 done1. [ ] task3 to do2. [x] task4 done1234

  • [ ] task1 to do

  • [x] task2 done 

    1. [ ] task3 to do

    2. [x] task4 done

表格(Table)

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe | (vertical bar):

First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell

For aesthetic purposes, you can also add extra pipes on the ends:

First HeaderSecond Header
Content CellContent Cell
Content CellContent Cell

Note that the dashes at the top don’t need to match the length of the header text exactly:

NameDescription
HelpDisplay the help window.
CloseCloses a window

You can also include inline Markdown such as links, bold, italics, or strikethrough:

NameDescription
HelpDisplay the help window.
CloseCloses a window

Finally, by including colons : within the header row, you can define text to be left-aligned, right-aligned, or center-aligned:

Left-AlignedCenter AlignedRight Aligned
col 3 issome wordy text$1600
col 2 iscentered$12
zebra stripesare neat$1

A colon on the left-most side indicates a left-aligned column; a colon on the right-most side indicates a right-aligned column; a colon on both sides indicates a center-aligned column.

數(shù)學(xué)公式

You can render LaTeX3  mathematical expressions using MathJax4 , as on math.stackexchange.com: 
The Gamma function satisfying Γ(n)=(n?1)!?n∈NΓ(n)=(n?1)!?n∈N is via the Euler integral

Γ(z)=∫∞tz?1e?tdt.Γ(z)=∫0∞tz?1e?tdt.

書寫一個質(zhì)能守恒公式

E=mc2E=mc2

The end!


  1. 這里的源碼為<font color='red'>標(biāo)題(Header)</font>,嘗試使用 font.color 著色。  ?

  2. YAML 是”YAML Ain’t a Markup Language”(YAML不是一種置標(biāo)語言)的遞歸縮寫,早先YAML的意思其實(shí)是:”Yet Another Markup Language”(另外一種置標(biāo)語言)。  ?

  3. LaTeX 是一種基于  ΤΕΧ 的排版系統(tǒng),它通過\section和\paragraph等語句,規(guī)定了每一句話在文章中所從屬的層次,從而極大方便了對各個層次批量處理。

  4. MatchJax  是一個JavaScript引擎,用來顯示網(wǎng)絡(luò)上的數(shù)學(xué)公式。MathJax可以解析Latex、MathML和ASCIIMathML的標(biāo)記語言。  ?

以上就是關(guān)于“Markdown怎么使用”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI