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