1. 程式人生 > >無意中發現Markdown,最終解放了我

無意中發現Markdown,最終解放了我

align strong issues .cn 標題 ons 對齊方式 強制 arp

文件夾

  • 概述
  • 換行
  • 刪除線
  • 鏈接自己主動識別
  • 表格
  • 代碼塊高亮
  • 定義列表
  • 腳註
  • 自己主動生成文件夾
  • 參考資料

正文

概述

大部分情況下,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/

效果:

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也能夠非常easy的實現腳註。

語法說明:

在須要標記腳註文字的後面加入一個方括號。方括號裏的內容必須以^開頭。再接著是數字或字符串標記:

腳註[ ^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]生成的。

參考資料

  • 基於pagedown-extra的擴展Markdown語法

  • 擴展 MARKDOWN 語法

  • [譯] GitHub 風格的 Markdown 語法


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

無意中發現Markdown,最終解放了我