1. 程式人生 > >markdown基本語法.md

markdown基本語法.md

文章目錄

一、基本用法

1.目錄

1.1 TOC

在段落中填寫 [TOC] 以顯示全文內容的目錄結構。

效果參見上方的目錄。不過github上並不支援,只在一些主流的社群和部落格支援。

1.2 doctoc 和i5ting_toc

使用node模組doctoc和i5ting_toc。
doctoc 可以在markdown檔案開頭生成目錄。也可以使用i5ting_toc把markdown編譯成帶有toc目錄的html檔案。

用法:
全域性安裝i5ting_toc

npm install -g i5ting_toc

在要轉換的md檔案根目錄下,使用以下命令:

i5ting_toc -f <檔名>.md -o

-f引數,如果沒有填寫,預設使用README.md

執行成功之後則在當前目錄下生成一個preview資料夾,裡面就是轉換後的HTML檔案。  

其他常見的命令引數如下:

-h, –help             output usage information   
-V, –version          output the version number   
-f, –file [filename]  default is README.md    
-o, –open             open in browser   
-v, –verbose          列印詳細日誌  

2.標題

兩種形式:

2.1使用=-標記一級和二級標題。

一級標題
=========
二級標題
---------

效果:

一級標題

二級標題

2.2使用#,可表示1-6級標題。

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題

效果:

一級標題

二級標題

三級標題

四級標題

五級標題
六級標題

注意,只有六級

3.段落

3.1普通段落

段落是由一個或多個連續的文字行組成,段落的前後要有空行,空行是指沒有文字內容。普通段落不該用空格或製表符來縮排。

若想在段內強制換行的方式是使用 兩個以上 空格加上回車(引用中換行省略回車)。效果相當於在行尾新增<br>標籤。

效果:

在逃去如飛的日子裡,在千門萬戶的世界裡的我能做些什麼呢?只有徘徊罷了,只有匆匆罷了;在八千多日的匆匆裡,除徘徊外,又剩些什麼呢?過去的日子如輕煙,被微風吹散了,如薄霧,被初陽蒸融了;我留著些什麼痕跡呢?我何曾留著像遊絲樣的痕跡呢?我赤裸裸來到這世界,轉眼間也將赤裸裸的回去罷?但不能平的,為什麼偏要白白走這一遭啊?

3.2 程式碼區塊

前後要有空行

並且縮排 4個空格 或是 1個製表符 就可以了。

效果相當於把文字放進<pre>標籤內:

我不去想,是否能夠成功。既然選擇了遠方,便只顧風雨兼程。我不去想能否贏得愛情,既然鍾情於玫瑰,就勇敢的吐露真誠。我不去想身後會不會襲來寒風冷雨,既然目標是地平線,留給世界的只能是背影。我不去想,未來是平坦還是泥濘,只要熱愛生命,一切,都在意料之中。

4.程式碼

4.1 單行程式碼

單行程式碼使用一對反引號`function`將程式碼包起來即可。效果同寫在<code>標籤內。

4.2 多行程式碼

如同上面提到的,我們可以將程式碼放進 程式碼區塊 內。不過顯然我們有更好的選擇:

對程式碼塊的 使用三個反引號[ ``` ] +[ 語言名稱]開始,比如java,javascript等標記該部分程式碼的型別,並且用[```]結束。

```javascript

var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat([pivot], quickSort(right));
};
```
在頁面展現的時候就可以高亮顯示關鍵字了:

    var quickSort = function(arr) {
      if (arr.length <= 1) { return arr; }
      var pivotIndex = Math.floor(arr.length / 2);
      var pivot = arr.splice(pivotIndex, 1)[0];
      var left = [];
      var right = [];
      for (var i = 0; i < arr.length; i++){
        if (arr[i] < pivot) {
          left.push(arr[i]);
        } else {
          right.push(arr[i]);
        }
      }
      return quickSort(left).concat([pivot],quickSort(right));
    };

markdown支援程式碼高亮的語言型別很多,基本上主流的程式語言都在其支援範圍。所以你可以放心的使用。

5.區塊引用及巢狀

Markdown 標記區塊引用是使用類似 email 中用 > 的引用方式。
在段落的每行或者只在第一行使用符號>,還可使用多個巢狀引用,無數量限制,如:

> 第一層
>> 第二層
>>> 第三層

效果:

第一層

第二層

第三層

6.強調

在強調內容兩側分別加上*或者_,如:

*斜體*,_斜體_
**粗體**,__粗體__
***斜體加粗*** ,___斜體加粗___
~~刪除~~

效果:

斜體斜體
粗體粗體
斜體加粗斜體加粗
刪除

7.錨點和頁內跳轉

如果使用markdown寫的文件內容很多,我們使用頁內跳轉。雖然我們已經藉助第三方模組根據標題定位。但錨點讓我們更加靈活,有了它,我們就可以更加自由的實現頁內跳轉了。

首先,我們自定義一個錨點。例如:

<div id=“anchor1”>

接著有兩種方式實現定位到上面的錨點:

7.1markdown的方法:

[名稱](#id)

注意,id必填,名稱選填。

7.2html的方法:

<a href=”#id”>名稱

方法一的效果:
anchor1

方法二的效果:
anchor1

8.外部連結

連結可以由兩種形式生成:行內式參考式
行內式

[百度](https://baidu.com “百度”)。

[ ]中為連結名。( )中是連結的的地址。" "中的是連結的標題,當滑鼠移到連結上時顯示的內容。

效果:

百度

注意 如果想要在新頁面中開啟的話,最好用a標籤代替。這樣相容性比較好。

百度

參考式

[連結一][1]
[連結二][2]

[1]:https://baidu.com “百度”
[2]:https://taobao.com “淘寶”

效果:

連結一
連結二

9.圖片

新增圖片的形式和連結相似,只需在連結的基礎上前方加一個
![Aaron Swartz](https://github.com/younghz/Markdown/raw/master/resource/Aaron_Swartz.jpg\ “Aaron Swartz”)
當圖片載入失敗時會顯示[ ]中的內容。( )中是圖片資源的的地址。" "中的是圖片的標題,當滑鼠移到圖片上時顯示的內容。

如果想更改圖片的大小和位置:

  1. 嵌入HTML的方式:
<img src="./xxx.png" width = "300" height = "200" alt="圖片名稱" align=center />

如果需要居中的話只要在外面包圍div標籤即可。

<div  align="center">    
  ...
</div>

下面兩種方法的相容性不好

  1. 直接在圖片後面加上對應的CSS樣式即可。
    ![img](url){:class=“responsive”}
    ![img](url){:height=“50%” width=“50%”}
    ![img](url){:height=“100px” width=“100px”}

  2. 使用支援圖片大小更改操作的 Mou 編輯器

10.列表

10.1無序列表

使用·+、或-標記無序列表,如:

-(+*) 第一項
-(+*) 第二項
- (+*)第三項

注意:標記後面最少有一個_空格_或_製表符_。若不在引用區塊中,必須和前方段落之間存在空行。

示例:
+ 第一項
+ 第二項
+ 第三項

效果:

  • 第一項
  • 第二項
  • 第三項

10.2有序列表

有序列表的標記方式是“數字+.”,如:

1.  第一項
2.  第二項
3.  第三項

"."跟內容之間要有空格。

有空格的效果:

  1. 第一項
  2. 第二項
  3. 第三項

沒空格的效果:

1.第一項
2.第二項
3.第三項

11.自動連結

Markdown 支援以比較簡短的自動連結形式來處理網址和電子郵件信箱,只要是用方括號包起來, Markdown 就會自動把它轉成連結。一般網址的連結文字就和連結地址一樣,例如:

<http://example.com/>

效果:

http://example.com/

12.註腳

  1. 加註:在需要添加註腳的文字後加上腳註名字[^註腳名字]。
  2. 新增腳註:然後在文字的任意位置“[^註腳名字]: + 內容 ”。
    (注前必須有對應的腳註名字。不論你將註腳寫在哪裡,它始終會被自動歸類到文章的最後。)

自題小像
靈臺無計逃神矢,風雨如磐暗故園。
寄意寒星[^1]荃不察,我以我血薦軒轅。

[^1]:寒星:宋玉《九辯》:“願寄言夫流星兮,”荃不察:屈原《離騷》:“荃不察餘之衷情兮。”

效果見此處和w文末:

自題小像
靈臺無計逃神矢,風雨如磐暗故園。
寄意寒星1荃不察,我以我血薦軒轅。

13.反斜槓

轉義符 。可以使有特殊作用的markdown符號轉化為普通符號在文件中顯示出來。

14.空格和縮排

在HTML中,如果你用空格鍵產生此空格,空格是不會累加的(只算1個)。要使用html實體表示才可累加。
HTML提供了5種空格實體(space entity),它們擁有不同的寬度,非斷行空格&nbsp;是常規空格的寬度,可運行於所有主流瀏覽器。其他幾種空格在不同瀏覽器中寬度各異。

比較:(為了便於觀察加了中括號)
[ ]&emsp;
[ ]&ensp;
[ ]&nbsp;
[ ]&thinsp;
[‌]&zwnj;
[‍]&zwj;

&nbsp;“不換行空格”,全稱No-Break Space。這是我們使用最多的空格,也就是按下space鍵產生的空格。
縮排:1/2字元,1/4中文字元。

&ensp;“半形空格”,全稱是En Space,en是字型排印學的計量單位,為em寬度的一半。
縮排:1字元,1/2中文字元。

&emsp;“全形空格”,全稱是Em Space,em是字型排印學的計量單位。
縮排:2字元,1中文字元。

&thinsp;“窄空格”,全稱是Thin Space。佔據的寬度是em之六分之一寬。

&zwnj;“零寬不連字”,全稱是Zero Width Non Joiner,簡稱“ZWNJ”,是一個不列印字元,放在電子文字的兩個字元之間,抑制本來會發生的連字,而是以這兩個字元原本的字形來繪製。

&zwj;“零寬連字”,全稱是Zero Width Joiner,簡稱“ZWJ”,是一個不列印字元,放在某些需要複雜排版語言(如阿拉伯語、印地語)的兩個字元之間,使得這兩個本不會發生連字的字元產生了連字效果。

注意,空格和&nbsp;可以疊加使用:
&nbsp; 之前和之後加一個空格也會顯示空格。

15.分割線

分割線最常使用就是 三個或以上 *-_


___
***
顯示效果是一樣的:


16.表格

\|表頭\|表頭\|表頭\|  
\|-----\|:----:|----:|  
|內容|內容|內容|  
內容|內容|內容  

效果如下:

表頭 表頭 表頭
內容 內容 內容
內容 內容 內容

第一行定義表頭。

第二行分割表頭和定義格式。

  • -有一個就行,為了對齊,多加了,無作用。
  • 文字預設居左。
  • -兩邊加:表示文字居中。
  • -右邊加:表示文字居右。
  • 外層兩邊的 | 可省略。

以下行填寫表格中的內容。

17.公式

見這篇文章:https://blog.csdn.net/testcs_dn/article/details/44229085

二、或許你會感興趣

markdown是什麼

    之所以把markdown寫在後面,是因為既然你有興趣瞭解它。肯定是對它有所瞭解。官方的介紹到處可以搜得到。但我仍然想整理一下,以至於不讓這篇文章顯得沒那麼單薄。
    markdown是一種純文字格式的標記語言。它可以和HTML完美融合,也可以將它轉化為HTML,因此也有人它是HTML的遠方親戚。
    markdown的應用相當普遍,如果你想寫部落格,那麼學會用markdown將會是你最好的第一步。雖然有很多主流部落格網站都有著自己不錯的markdown編輯器,能夠幫助我們不用記住它的語法也能編輯出好看的markdown文字,但如果你想隨心所欲的自己編寫能夠相容各個部落格網站甚至自己的部落格網站的markdown。那麼你就不應該錯過markdown的學習。

Aaron Swartz

    提到markdown就不得不提它的創造者Aaron Swartz。這裡面的故事足夠傳奇和精彩。相信你一定有興趣去了解。

  1. 寒星:宋玉《九辯》:“願寄言夫流星兮,”荃不察:屈原《離騷》:“荃不察餘之衷情兮。” ↩︎