使用CSDN Markdown寫博客

1. Markdown介紹

Markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文本格式編寫文檔,然後轉換成格式豐富的HTML頁面。 —— 維基百科

CSDN提供編輯器支持 Markdown Extra ,  擴展了很多好用的功能。具體代碼請參考Github.


2. 語法說明

標題

在 Markdown 中,你只需要在文本前面加上#即可,同理、你還可以增加二級標題、三級標題、四級標題、五級標題和六級標題,總共六級,只需要增加#即可,標題字號相應降低。例如:

# 一級標題
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

鏈接和圖片

在 Markdown 中,插入鏈接不需要其他按鈕,你只需要使用 [顯示文本](鏈接地址)這樣的語法即可,例如:

[百度](https://www.baidu.com)
  • 1

顯示效果:百度

在 Markdown 中,插入圖片不需要其他按鈕,你只需要使用 ![](圖片鏈接地址)這樣的語法即可,例如:

![](http://ww4.sinaimg.cn/bmiddle/aa397b7fjw1dzplsgpdw5j.jpg)
  • 1

顯示效果:

Markdown 支持自動鏈接形式來處理網址和電子郵件信箱,只要是用尖括號包起來, Markdown 就會自動把它轉成鏈接。例如:<https://www.baidu.com>
 

引用

在我們寫Blog的時候經常需要引用他人的文字,這個時候引用這個格式就很有必要了,在 Markdown 中,只需要在你希望引用的文字前面加上>就好了,例如:

> 矛盾說:我從來不夢想,我只是在努力認識現實;戲劇家洪深說:我的夢想是明年吃苦的能力比今年更強;魯迅說:人生最大的痛苦是夢醒了無路可走;蘇格拉底說:人類的幸福和歡樂在於奮鬥,而最有價值的是爲了理想而奮鬥。
  • 1

顯示效果:

矛盾說:我從來不夢想,我只是在努力認識現實;戲劇家洪深說:我的夢想是明年吃苦的能力比今年更強;魯迅說:人生最大的痛苦是夢醒了無路可走;蘇格拉底說:人類的幸福和歡樂在於奮鬥,而最有價值的是爲了理想而奮鬥。

粗體和斜體

Markdown 的粗體和斜體也非常簡單,用兩個*包含一段文本就是粗體的語法,用一個*包含一段文本就是斜體的語法。例如: 

大概是任何一件不起眼的小事被某個人有意識地重複了*幾十年**甚至一生*,而形成的某個**傳說**
  • 1

大概是任何一件不起眼的小事被某個人有意識地重複了幾十年甚至一生,而形成的某個傳說

分割線

你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,可以在星號或是減號中間插入空格,例如:

***
* * * 
*******
---
_____   
  • 1
  • 2
  • 3
  • 4
  • 5

中文首行縮進

兩種方法可以實現:

  • 把輸入法由半角改爲全角。 兩次空格之後就能夠有兩個漢字的縮進。
  • 在段落開頭的時候,先輸入:&#160; &#160; &#160; &#160;,然後緊跟着輸入文本即可。

表格

表格代碼:

項目     | 價格
-------- | ---
Computer | $1600
Phone    | $12
Pipe     | $1
  • 1
  • 2
  • 3
  • 4
  • 5

顯示效果:

項目 價格
Computer $1600
Phone $12
Pipe $1

可以使用冒號來定義對齊方式:

表格代碼:

| 項目      |    價格 | 數量  |
| :-------- | --------:| :--: |
| Computer  | 1600 元 |  5   |
| Phone     |   12 元 |  12  |
| Pipe      |    1 元 | 234  |
  • 1
  • 2
  • 3
  • 4
  • 5

顯示效果:

項目 價格 數量
Computer 1600 元 5
Phone 12 元 12
Pipe 1 元 234

定義列表

無序列表:只需要在文字前面加上-*+就可以了,它們效果是一樣的,例如:

+ 語文
+ 數學
+ 英語
  • 1
  • 2
  • 3

顯示效果:

  • 語文
  • 數學
  • 英語

有序列表:用數字加英文的句點,這裏數字不會影響輸出,比如:

1. 機器學習
5. 模式識別
3. 人工智能
  • 1
  • 2
  • 3

顯示效果:

  1. 機器學習
  2. 模式識別
  3. 人工智能

縮進列表:用:標記要縮進的行,例如:

項目1
: 定義 A
: 定義 B

項目2
: 定義 C
: 定義 D
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
顯示效果:
項目1
定義 A
定義 B
項目2
定義 C
定義 D

代碼

如果要標記一小段行內代碼,你可以用反引號把它包起來,例如:

C語言中使用`printf()`進行格式化輸出。
  • 1

顯示效果: C語言中使用printf()進行格式化輸出。

代碼塊

將要顯示的代碼塊放在3對反引號中間,CSDN提供的編譯器支持不同的語法高亮,只要在反引號後接上語言,例如:

 ``` python
 @requires_authorization
 def somefunc(param1='', param2=0):
     '''A docstring'''
     if param1 > param2: # interesting
         print 'Greater'
     return (param2 - param1 + 1) or None
 class SomeClass:
     pass
 >>> message = '''interpreter
 ... prompt'''
 ```
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

顯示效果:

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

腳註

markdown 代碼:

生成一個腳註[^footnote].
注:footnote是自定義變量  
  • 1
  • 2
  • 3
  • 4

顯示效果:
生成一個腳註1.

目錄

[TOC]來生成目錄,現在默認會生成目錄。

UML 圖

可以渲染序列圖,例如:

```sequence
張三->李四: 嘿,小四兒, 寫博客了沒?
Note right of 李四: 李四愣了一下,說:
李四-->張三: 忙得吐血,哪有時間寫。
 ```
  • 1
  • 2
  • 3
  • 4
  • 5

顯示效果:

Created with Raphaël 2.1.0張三張三李四李四嘿,小四兒, 寫博客了沒?李四愣了一下,說:忙得吐血,哪有時間寫。

流程圖markdown代碼如下:

```flow
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
cond=>condition: 確認?

st->op->cond
cond(yes)->e
cond(no)->op
 ```
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

顯示效果:

Created with Raphaël 2.1.0開始我的操作確認?結束yesno
  • 關於 序列圖 語法,參考 這兒,
  • 關於 流程圖 語法,參考 這兒.

3. 離線寫博客

即使在沒有網絡的情況下,也可以通過本編輯器離線寫博客(直接在曾經使用過的瀏覽器中輸入write.blog.csdn.net/mdeditor即可。Markdown編輯器使用瀏覽器離線存儲將內容保存在本地。

在寫博客的過程中,內容會實時保存在瀏覽器緩存中,在關閉瀏覽器或者其它異常情況下,內容都不會丟失。再次打開瀏覽器時,會顯示上次正在編輯的沒有發表的內容。

博客發表後,本地緩存將被刪除。 

可以選擇 把正在寫的博客保存到服務器草稿箱,即使換瀏覽器或者清除緩存,內容也不會丟失。


4. 瀏覽器兼容

  1. 目前,CSDN提供的編輯器對Chrome瀏覽器支持最爲完整。建議大家使用較新版本的Chrome。
  2. IE9以下不支持
  3. IE9,10,11存在以下問題
    1. 不支持離線功能
    2. IE9不支持文件導入導出
    3. IE10不支持拖拽文件導入

5. 快捷鍵

  • 加粗 Ctrl + B
  • 斜體 Ctrl + I
  • 引用 Ctrl + Q
  • 插入鏈接 Ctrl + L
  • 插入代碼 Ctrl + K
  • 插入圖片 Ctrl + G
  • 提升標題 Ctrl + H
  • 有序列表 Ctrl + O
  • 無序列表 Ctrl + U
  • 橫線 Ctrl + R
  • 撤銷 Ctrl + Z
  • 重做 Ctrl + Y

6. 總結

CSDN提供的Markdown編輯器使用StackEdit修改而來,它有如下特點:

  • Markdown和擴展Markdown簡潔的語法
  • 代碼塊高亮
  • 圖片鏈接和圖片上傳
  • LaTex數學公式
  • UML序列圖和流程圖
  • 離線寫博客
  • 導入導出Markdown文件
  • 豐富的快捷鍵

  1. 這裏是 腳註內容.
    </article>

  1. 這裏是 腳註內容.
發佈了14 篇原創文章 · 獲贊 13 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章