童雷 ·Markdown 代碼高亮
1. 前言
Markdown 的代碼高亮是對代碼塊語法的擴展。即通過對代碼塊進行語法標注，對其在渲染輸出時匹配不同的樣式。
代碼高亮模塊是 Markdown 的一種擴展語法，通常通過第三方的高亮插件完成支持。常見的高亮插件實現如 Typora 使用的 「codemirror」，還有在網頁中應用較多的 「highlightjs」等。大部分的 Markdown 編輯器或者編輯環境都已經集成好，只要按照其語法規范，在文檔完成渲染后即可得到帶有高亮樣式的代碼塊了。
環境說明：
考慮到 Markdown 工具之間的不兼容，有的內容直接從頁面復制粘貼到本地不會正常顯示，大家學習時自己動手寫是肯定沒問題的。本節所有實例代碼及演示效果均使用 Typora 工具完成。
2. 語法詳解
2.1 基礎語法
在 Markdown 文件中，代碼塊后面標注語法類型，即可完成語法的高亮顯示。
實例 1：
#### 高亮 Html 代碼
?```html
<!DOCTYPE html>
<html>
<head><title>highlight</title></head>
<body>
<p>Hello world</p>
</body>
</html>
?```
其渲染結果如下：
其轉換后的 html 的內容如下：
<pre class="editor-colors lang-html">此處省略</pre>
可以看到，轉換后的代碼中增加了 lang-html 這樣的樣式。
2.2 切換高亮的樣式
以 Typora 為例，Typora 使用的是 CodeMirror 實現的高亮，如果需要切換代碼樣式，可以去 CodeMirror 官網下載樣式文件，其官網地址：https://codemirror.net/
- 在 CodeMirror 官網上選擇心儀的樣式（比如：material），樣式選擇頁：Theme demo；
- 打開 Typora 樣式目錄，“設置” -> “外觀” -> “打開主題文件夾”；
- 復制 github.css 和 github 文件夾，將 css 文件更名為 material.user.css，將文件夾更名為 material；
- 編輯 material.user.css 文件，將在 CodeMirror 網站上選擇的樣式內容復制到 css 文件中 下載地址，并將所有
material批量 替換成inner；
- 重啟 typora，并選擇 material 主題，此時可以看到所有代碼塊的樣式已經改變。
2.3 Typora 高亮支持的種類
| A-C | D-F | G-I | J-M | N-R | S-T | V-Y |
|---|---|---|---|---|---|---|
| ASN.1 | D | gas | jade | nginx | SAS | vb |
| apl | dart | gfm | java | nsis | SPARQL | vbscript |
| asciiarmor | diff | gherkin | javascript | objc | scala | velocity |
| asp | django | glsl | jinja2 | objective-c | scheme | verilog |
| assembly | dockerfile | go | js | ocaml | scss | vhdl |
| bash | ejs | handlebars | kotlin | octave | tcl | web-idl |
| basic | elixir | haskell | latex | oz | tex | wiki |
| CQL | elm | haxe | less | pascal | tiddlywiki | xaml |
| c | embeddedjs | html | lisp | perl | tiki wiki | xml |
| c# | erb | http | livescript | perl6 | toml | xml-dtd |
| c++ | F# | idl | lua | pgp | xquery | |
| cassandra | fortran | ini | makefile | php | yacas | |
| fsharp | mariadb | R | yaml | |||
| markdown | reStructuredText | |||||
| mathematica | react | |||||
| matlab | rst | |||||
| ruby |
3. 使用場景及實例
代碼塊作為對代碼段落的增強功能，目的是使文檔中出現的代碼塊在表現時可以更為清晰有層次。
實例 2：各式各樣的 Hello world!
#### 各式各樣的 Hello world
?```java
// Java
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, world!");
}
}
?```
?```python
# Python
print("Hello, world!")
?```
?```ruby
# Ruby
puts "Hello, world!"
?```
?```scala
// Scala
object HelloWorld extends App {
println("Hello, world!")
}
?```
?```go
// Go
package main
import "fmt"
func main() {
fmt.Println("Hello, world!")
}
?```
渲染結果如下：
4. 小結
- 語法高亮是 Markdown 的擴展功能，寫作者是否可以實現語法高亮需要依賴其所用編輯器或渲染工具的支持能力與配置；
- 語法高亮擴展了 Markdown 代碼塊的功能，實現方式是在代碼塊的起點增加語法聲明；
- 由于插件支持度不同、主題不同，不同環境下的高亮輸出結果也可能不同；
- 寫作者可以自定義高亮效果或者高亮主題，具體方法需要參考對應的高亮插件。
2025 imooc.com All Rights Reserved |