1. 程式人生 > >CSDN-markdown擴充套件語法說明

CSDN-markdown擴充套件語法說明

目錄

正文

概述

大部分情況下,Markdown的基本語法已夠我們使用,比如隨性記錄點東西、非專業的分析文章等,一般只用到標題、區塊引用、強調、列表這樣的基本元素。但若要寫專業性比較強的分析文章或技術性文章,這些基本語法就不夠用了,因為我們經常會用到表格、腳註、想要自動生成文章目錄等,若是涉及程式碼的技術文章,我們還希望程式碼支援高亮以提升閱讀體驗。這就需要用到Markdown的擴充套件語法了。

CSDN-markdown編輯器支援基於PageDown( Stack Overflow所使用的編輯器)的擴充套件,從而支援GFM(GitHub Flavored Markdown)的Markdown Extra語法。下面詳細介紹這些可使用的擴充套件語法。

換行

在標準Markdown語法中,要想換行必須在一行的最後加兩個空格才行,否則即使你在一行的末尾插入硬回車,這些文字仍然會被合併為一行,這個特性會導致大量非預期的格式化錯誤。

但是GFM則沒有此要求。GFM會把段落內容中的換行視為真正的換行,而這很可能正是你所期望的。

下面這個段落被一個換行符分隔成了兩行:

Roses are red
Violets are blue

將被渲染為:

Roses are red
Violets are blue

刪除線

GFM也支援刪除線的使用,只要用~~將需要刪除的文字包圍起來即可。

例子:

~~Mistaken text.~~

轉為HTML後為:

<p><del>Mistaken text.</del></p>

效果:

Mistaken text.

在前面文章「CSDN-markdown基本語法說明—自動連結」中講到,對於網址和Email的自動連結需要用一對尖括號括起來才能識別。

而在GFM中,對於標準的URL需要加連結,只需簡單地輸入這個URL就可以,它將被自動轉換為一個連結。

例子:

http://blog.csdn.net/lanxuezaipiao/

效果:

但對於Email地址,在CSDN-markdown編輯器裡還不支援自動識別,仍需要加尖括號。

表格

一般的表格包括表頭(可選)和單元格,Markdown Extra使用豎線和分割線標記表格。

語法說明:

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

第一行包含可選的表頭,第二行包含位於表頭和單元格內容之間的強制性分隔線,接下來的每一行就是單元格的內容,列與列之間用豎線 | 分隔。

如果願意的話,可以在表格每一行的開頭和結尾處新增豎線 |,如下所示得到的結果和上面一致:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

注意事項:

表格的每一行至少有一個豎線|,否則無法正確處理表格。這也就意味著,建立只有一列的表格,必須在每一行的開頭或者結尾處新增一個豎線|,或者都新增。

例子:

專案     | 價格
-------- | ---
Computer | $1600
Phone    | $12
Pipe     | $1

轉為HTML後為:

<table>
  <tr>
    <th>專案</th>
    <th>價格</th>
  </tr>
  <tr>
    <td>Computer </td>
    <td>$1600</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>$12</td>
  </tr>
<tr>
    <td>Pipe</td>
    <td>$1</td>
  </tr>
  </table>

效果:

專案 價格
Computer $1600
Phone $12
Pipe $1

問題:如何設定表格對齊方式

看到這裡可能有人會問:怎麼都是左對齊?能不能設定為居中對齊呢?

在Markdown Extra中,需要在對應列的分隔線左右新增冒號:來指定列的對齊方式

  • 冒號 : 在分隔線的左邊說明此列左對齊(預設方式)
  • 冒號 : 在分隔線的右邊說明此列右對齊
  • 在分隔線的左右兩邊都有冒號 : 說明此列居中。

比如下面的 專案列是左對齊,價格列是右對齊,而數量列是居中對齊的:

| 專案      |    價格 | 數量  |
| :-------- | --------:| :--: |
| Computer  | 1600 元 |  5   |
| Phone     |   12 元 |  12  |
| Pipe      |    1 元 | 234  |

效果為:

專案 價格 數量
Computer 1600 元 5
Phone 12 元 12
Pipe 1 元 234

當然對於單元格里的內容,你也可以使用各種Markdown語法,比如加粗、刪除線什麼的。

程式碼塊高亮

前面在文章「CSDN-markdown基本語法說明」裡已經介紹了可以通過縮排四個空格或一個製表符來將文字轉換為程式碼塊,但這種方式有兩個缺點:

  • 程式碼塊的每一行都需要縮排,還好CSDN-markdown編輯器支援全選程式碼塊然後按Tab鍵實現一起縮排效果,但是也有很多MD編輯器是不能這樣一起縮排的,那麼你就需要手動的一行一行縮排,程式碼長的話這將是一個費時費力且無聊的工作。

  • 不支援程式碼高亮功能,這對程式設計師來說是非常不好的體驗。

幸好,CSDN-markdown編輯器經過PageDown擴充套件後,支援GFM的程式碼塊高亮功能。只要把程式碼塊包裹在 ``` 之間,你就不需要通過無休止的縮排來標記程式碼塊了。

語法說明:

使用``` (三個反引號)包圍程式碼塊即可,裡面的程式碼塊不需要任何縮排。這種方式也稱“圍欄式程式碼塊”,如下:

```
程式碼塊
```

例子:

```
printf("Hello World!");
```

轉為HTML後為:

<pre>
    <code>printf("Hello World!");</code>
</pre>

效果:

printf("Hello World!")

注意上面是預設的程式碼塊著色效果,GFM還有更進一步的措施,你可以指定一個可選的程式語言識別符號(比如c++、Java、Python等),然後就可以啟用指定語言的語法著色了。

例子:

下面以一段 Ruby 程式碼著色為例:

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

轉為HTML後為:

<pre class="prettyprint">
    <code class="language-ruby">
    require 'redcarpet' 
    markdown = Redcarpet.new("Hello World!")
    puts markdown.to_html
   </code>
</pre>

效果:

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

我們使用 Linguist 來進行語言識別和語法著色。你可以在 語言 YAML 檔案 中查證哪些語言識別符號是有效的。

定義列表

有時候我們在寫文件時需要對某些列表項進行說明性定義,在html中我們可以使用<dt><dd>這樣的標籤來實現,Markdown Extra中更加簡潔,只需使用冒號就可以解決。

語法說明:

列表中的專案
:  專案的定義部分

即使用“冒號:+ 一個以上的空格 + 專案的定義部分”來定義一個專案的定義內容。

例子:

專案1
專案2
:   定義 A
:   定義 B

專案3
:   這個定義有一個程式碼塊

        程式碼塊

專案4
:   這個定義有一個引用塊

    > 定義D內容

轉為HTML後為:

<dl>
  <dt>專案1</dt>
  <dt>專案2</dt>
  <dd>
    定義A
  </dd>
  <dd>
    定義B
  </dd>
  <dt>專案3</dt>
  <dd>
    這個定義有一個程式碼塊
    <pre><code>程式碼塊</code></pre>
  </dd>
  <dt>專案4</dt>
  <dd>
    這個定義有一個引用塊
    <pre><code>定義D內容</code></pre>
  </dd>
</dl>

效果:

專案1
專案2
定義 A
定義 B
專案3

這個定義有一個程式碼塊

程式碼塊
專案4

這個定義有一個引用塊

定義D內容

注意事項:

定義的內容可以包含行級(如行內程式碼)和塊級(如區塊引用、程式碼塊)的Markdown語法。

腳註

腳註用於為正文中的某個條目新增補充註釋,說明該條目的引文出處,跟參考文獻一樣,腳註一般位於文件的末尾,文章內以數字標註。在Markdown Extra也可以很容易的實現腳註。

語法說明:

在需要標記腳註文字的後面新增一個方括號,方括號中的內容必須以^開頭,再接著是數字或字串標記:

腳註[ ^1]有一個標籤[^label]和該標籤的定義[^!DEF].

接著,在檔案的任意地方,你可以把這個腳註的內容定義出來:

[ ^1]: 這是一個腳註
[^label]: 這是腳註的標籤
[^!DEF]: 這是腳註標籤的定義

腳註內容定義的形式:

  • 前面引用腳註的標籤符號
  • 接著一個冒號
  • 再接著一個以上的空格或製表符
  • 最後是腳註定義的內容。

腳註定義的內容可以包含多行、程式碼區塊、區塊引用和大多數其他markdown格式的內容。

例子:

這是一個腳註[ ^footnote].

[ ^footnote]: 腳註定義內容的第一行內容.
定義內容的第二行.
> 一個包含多行的
> 區塊引用.

轉為HTML後為:

<p>這是一個腳註<a href="#fn:footnote" id="fnref:footnote" title="See footnote" class="footnote">1</a>.</p>

<div class="footnotes">
<hr>
<ol>
<li id="fn:footnote">腳註定義內容的第一行內容. <br />
定義內容的第二行.
<blockquote> 一個包含多行的 <br />
    > 區塊引用.
</blockquote> 
<a href="#fnref:footnote" title="Return to article" class="reversefootnote">↩</a></li>
</ol>
</div>

效果:

這是一個腳註1.



預設情況下,腳註內容位於生成的 HTML 文件末尾,上面的腳註內容在該文章的末尾可以看到。

自動生成目錄

在需要目錄出現的地方(一般在文章一開始)放置一個標記,這樣會自動生成一個巢狀的包含所有標題的列表。預設的標記是[TOC]

例子:

[TOC]

# 概述

## 定義

## 用處

# 結論

最前面的那個目錄就是用 [TOC]生成的。

參考資料

  1. 腳註定義內容的第一行內容.
    定義內容的第二行.
    一個包含多行的
    區塊引用.