童雷 ·Markdown 代碼塊
1. 前言
關(guān)于代碼塊，Markdown 作者給出的定義如下：
預(yù)格式化代碼塊主要用于在 Markdown 文檔中顯示源代碼風(fēng)格的內(nèi)容。相比普通的文本段落，代碼塊可以保留文字內(nèi)容的多行換行、縮進(jìn)等格式。
在 Markdown 文檔中生成代碼塊，需要在每行的開(kāi)頭輸入不少于 4 個(gè)空格符號(hào)或者 1 個(gè) tab 符號(hào)。
原文出處：daringfireball.net。
Markdown 作為一種排版工具語(yǔ)言，其作用是為了幫助我們處理一些常見(jiàn)的排版問(wèn)題。但是我們?nèi)杂幸恍﹫?chǎng)景需要保留文字的原格式，例如不同的縮進(jìn)、中間空格數(shù)量等。Markdown 通過(guò)代碼塊的方式處理需要保存格式的多行文字內(nèi)容。
環(huán)境說(shuō)明：
考慮到 Markdown 工具之間的不兼容，有的內(nèi)容直接從頁(yè)面復(fù)制粘貼到本地不會(huì)正常顯示，大家學(xué)習(xí)時(shí)自己動(dòng)手寫(xiě)是肯定沒(méi)問(wèn)題的。本節(jié)所有實(shí)例代碼及演示效果均使用 Typora 工具完成。
2. 語(yǔ)法詳解
2.1 代碼塊
在 Markdown 文件中，在行首添加 4 個(gè)連續(xù)的空格，可將行內(nèi)容定義為代碼塊。
實(shí)例 1：
#### 使用空格定義代碼塊
pubic static void main(String[] args) {
System.out.println("Hello world");
}
其渲染結(jié)果如下：
注意：Typora 編輯器在默認(rèn)模式（實(shí)時(shí)渲染模式）下無(wú)法通過(guò)此方法生成代碼塊，需要先切換到源代碼模式（「顯示」->「源代碼模式」）后添加空格。
該源碼渲染輸出 html 的內(nèi)容如下：
<pre>
<div><span><span>pubic static void main(String[] args) {</span></span></div>
<div><span><span> </span><span>System.out.println("Hello world");</span></span></div>
<div><span><span>}</span></span></div>
</pre>
代碼塊的另一種定義方式是以三個(gè)連續(xù)的 「反引號(hào) “`”」 作為開(kāi)始行和結(jié)束行。
實(shí)例 2：
#### 使用反引號(hào)定義代碼塊
?```
pubic static void main(String[] args) {
System.out.println("Hello world");
}
?```
其渲染結(jié)果如下：
在這種方式下，我們還可以聲明代碼的高亮樣式，方法是在首行的連續(xù)的三個(gè) 「反引號(hào) “`”」 后面加入源代碼語(yǔ)言的標(biāo)記，比如：javascript、Markdown、json、java、c++、sql 等，具體支持的種類和使用的 Markdown 編輯器或渲染程序配置有關(guān)。
實(shí)例 3：
#### 使用反引號(hào)定義代碼塊，并定義高亮
?```java
pubic static void main(String[] args) {
System.out.println("Hello world");
}
?```
其渲染結(jié)果如下：
3. 使用場(chǎng)景及應(yīng)用實(shí)例
行內(nèi)代碼功能可以讓我們很輕松的在文章文字內(nèi)容中間增加諸如 <html> 標(biāo)簽的內(nèi)容，而不需要手動(dòng)轉(zhuǎn)義。當(dāng)我們編寫(xiě)程序說(shuō)明文檔時(shí)，或者其他需要在文檔中插入特殊字符時(shí)，這個(gè)功能的作用會(huì)非常明顯。
實(shí)例 4：
畫(huà)一張字符畫(huà)。
#### 一張字符畫(huà)
?```
.__ .__ .__ .__ .___
| |__ ____ | | | | ____ __ _ _____________| | __| _/
| | \_/ __ \| | | | / _ \ \ \/ \/ / _ \_ __ \ | / __ |
| Y \ ___/| |_| |_( <_> ) \ ( <_> ) | \/ |__/ /_/ |
|___| /\___ >____/____/\____/ \/\_/ \____/|__| |____/\____ |
\/ \/ \/
?```
渲染結(jié)果如下：
4. 小結(jié)
- 當(dāng)使用 4 個(gè)空格聲明代碼塊時(shí)，轉(zhuǎn)換后的代碼文本會(huì)自動(dòng)刪除掉縮進(jìn)的距離，也就是會(huì)從行首自動(dòng)刪掉 4 個(gè)空格，以保持格式；
- 當(dāng)使用 4 個(gè)空格聲明代碼塊時(shí)，代碼塊的結(jié)束聲明在后面首個(gè)縮進(jìn)不足 4 個(gè)空格的行；
- 常規(guī)的 Markdown 語(yǔ)義，比如「星號(hào)
*」在代碼塊中的轉(zhuǎn)義作用失效。
「代碼塊」和「行內(nèi)代碼」都是方便于顯示特殊字符，相比「行內(nèi)代碼」，「代碼塊」更有利于顯示段落文本，表現(xiàn)出原文本的換行及縮進(jìn)效果。
2025 imooc.com All Rights Reserved |