Markdown常用語法

封面.jpg

當(dāng)我使用hexo和github搭建完成屬于自己的個(gè)人博客之后,發(fā)表的每一篇文章都需要以markdown的形式編寫,于是想借此機(jī)會(huì)系統(tǒng)的學(xué)習(xí)一下markdown的語法知識(shí)。


注意:Markdown 編寫的文檔可以導(dǎo)出 HTML 、Word、圖像、PDF、Epub 等多種格式的文檔。

一. 基礎(chǔ)語法

1.1 標(biāo)題

#號(hào)可以表示1-6級(jí)標(biāo)題,使用 = 和 - 標(biāo)記一級(jí)和二級(jí)標(biāo)題

熱愛生活,懂得感恩
===

熱愛生活,懂得感恩
---

等同于

# 熱愛生活,懂得感恩
## 熱愛生活,懂得感恩

效果:


標(biāo)題.png

1.2 字體

*空氣很稀薄,因?yàn)榧拍?
_空氣很稀薄,因?yàn)榧拍痏

**空氣很稀薄,因?yàn)榧拍?*
__空氣很稀薄,因?yàn)榧拍痏_

***空氣很稀薄,因?yàn)榧拍?**
___空氣很稀薄,因?yàn)榧拍痏__

效果:


字體.png

1.3 分割線

可以在一行中用三個(gè)以上的星號(hào)、減號(hào)、底線來建立一個(gè)分隔線,行內(nèi)不能有其他東西。你也可以在星號(hào)或是減號(hào)中間插入空格。下面每種寫法都可以建立分隔線:

***
* * *
*****
- - -
----------

效果:


分割線.png

1.4 刪除線

~~你不在的世界里都是陰天,思念像太用力會(huì)拉扯的線~~

效果:


刪除線.png

1.5 下劃線

<u>脆弱是,若無其事晴天里,突然的大雨</u>

效果:


下劃線.png

1.6 腳注

別說我說慌,人生已經(jīng)如此的艱難,有些事情就不要拆穿。[^life]
[^life]:出自林宥嘉的《說謊》

效果:


腳注.png

1.7 列表

Markdown 支持無序列表和有序列表。

1.7.1 無序列表

無序列表使用星號(hào)(*****)、加號(hào)(+)或是減號(hào)(-)作為列表標(biāo)記

* 第一項(xiàng)
* 第二項(xiàng)
* 第三項(xiàng)

+ 第一項(xiàng)
+ 第二項(xiàng)
+ 第三項(xiàng)


- 第一項(xiàng)
- 第二項(xiàng)
- 第三項(xiàng)

效果:


無序列表.png

1.7.2 有序列表

有序列表使用數(shù)字并加上 . 號(hào)來表示

1. 第一項(xiàng)
2. 第二項(xiàng)
3. 第三項(xiàng)

效果:


有序列表.png

1.7.3 列表嵌套

列表嵌套只需在子列表中的選項(xiàng)添加四個(gè)空格即可:

5. 第一項(xiàng)
2. 第二項(xiàng)
3. 第三項(xiàng)  


1. 第一項(xiàng):
    1. 第一項(xiàng)嵌套的第一個(gè)元素
    1. 第一項(xiàng)嵌套的第二個(gè)元素
2. 第二項(xiàng):
    1. 第二項(xiàng)嵌套的第一個(gè)元素
    9. 第二項(xiàng)嵌套的第二個(gè)元素

效果:


列表嵌套.png

1.8 區(qū)塊

Markdown 區(qū)塊引用是在段落開頭使用 > 符號(hào) ,然后后面緊跟一個(gè)空格符號(hào)

1.8.1 區(qū)塊

> 我說所有的酒,都不如你
> 春風(fēng)十里
>不加空格好像也可以

效果:


區(qū)塊.png

1.8.2 區(qū)塊嵌套:

> 想看看你的心
> > 記錄誰的表情
> > > 計(jì)算我差多少的距離

效果:


區(qū)塊嵌套.png

1.8.3 區(qū)塊和列表混搭:

1. 周杰倫
    > 《一路向北》
    > 《世界末日》
1. 許嵩

效果:


區(qū)塊和列表混搭.png

1.9 代碼

1.9.1 函數(shù)或片段

如果是段落上的一個(gè)函數(shù)或片段的代碼可以用反引號(hào)把它包起來(`

`我就是我,是顏色不一樣的煙火`

效果:


函數(shù)或片段.png

1.9.2 代碼區(qū)塊

代碼區(qū)塊使用 4 個(gè)空格或者一個(gè)制表符(Tab 鍵),也可以用 ``` 包裹一段代碼,并指定一種語言(也可以不指定)

```javascript
$(document).ready(function () {
    alert('RUNOOB');
});


    $(document).ready(function () {
        alert('RUNOOB');
    });


$(document).ready(function () {
    alert('這樣是不行的');
});

效果:


代碼區(qū)塊.png

1.10 鏈接

[我尋你千百度,日出到遲暮](https://www.baidu.com/)
`或者`
<https://www.baidu.com/>
`或者`
[眾里尋他千百度,那人卻在燈火闌珊處][baidu]


[baidu]:https://www.baidu.com/

效果:


鏈接.png

1.11 圖片

 ![RUNOOB 圖標(biāo)](http://static.runoob.com/images/runoob-logo.png)
`or`
 ![RUNOOB 圖標(biāo)](http://static.runoob.com/images/runoob-logo.png "RUNOOB")
`or`
這個(gè)鏈接用 1 作為網(wǎng)址變量 [RUNOOB][logo].
然后在文檔的結(jié)尾為變量賦值(網(wǎng)址)


[logo]: http://static.runoob.com/images/runoob-logo.png
`如果要指定具體的寬高,則:`
<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">

效果:


圖片.png

1.12 表格

  • Markdown 制作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行,
  • -: 居右對(duì)齊 , :- 左對(duì)齊 , :-: 居中對(duì)齊。
|  表頭默認(rèn)是左對(duì)齊?    | 表頭  |          
|  ----  | ----  |
| 單元格  | 單元格 |        
| 單元格  | 單元格 |
| 單元格  | 單元格 |



| 左對(duì)齊加長才體現(xiàn)效果 | 右對(duì)齊加長才體現(xiàn)效果 | 居中對(duì)齊加長才體現(xiàn)效果 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |  

效果:

二. 高級(jí)技巧

2.1 支持HTML標(biāo)簽

目前支持的 HTML 元素有:<kbd> <b> <i> <em>
<image> <div>等

<em>使</em><i>用</i><br> <kbd>Ctrl</kbd>+<sub>Alt</sub>+<sup>Del</sup> 重啟<b>電腦</b>

效果:


支持HTML標(biāo)簽.png

2.2 轉(zhuǎn)義

Markdown 支持以下這些符號(hào)前面加上反斜杠來幫助插入普通的符號(hào)

  • \ 反斜線
  • ` 反引號(hào)
  • * 星號(hào)
  • _ 下劃線
  • {} 花括號(hào)
  • [] 方括號(hào)
  • () 小括號(hào)
  • # 井字號(hào)
  • + 加號(hào)
  • - 減號(hào)
  • . 英文句點(diǎn)
  • ! 感嘆號(hào)
**后視鏡里的世界** 
\*\* 越來越遠(yuǎn)的道別 \*\*

效果:


轉(zhuǎn)義.png

2.3 公式

公式

2.4 圖標(biāo)

圖標(biāo)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容