第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

童雷 · 更新于 2020-05-07

Markdown 代碼高亮

1. 前言

Markdown 的代碼高亮是對(duì)代碼塊語(yǔ)法的擴(kuò)展。即通過(guò)對(duì)代碼塊進(jìn)行語(yǔ)法標(biāo)注，對(duì)其在渲染輸出時(shí)匹配不同的樣式。

代碼高亮模塊是 Markdown 的一種擴(kuò)展語(yǔ)法，通常通過(guò)第三方的高亮插件完成支持。常見(jiàn)的高亮插件實(shí)現(xiàn)如 Typora 使用的 「codemirror」，還有在網(wǎng)頁(yè)中應(yīng)用較多的 「highlightjs」等。大部分的 Markdown 編輯器或者編輯環(huán)境都已經(jīng)集成好，只要按照其語(yǔ)法規(guī)范，在文檔完成渲染后即可得到帶有高亮樣式的代碼塊了。

環(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 基礎(chǔ)語(yǔ)法

在 Markdown 文件中，代碼塊后面標(biāo)注語(yǔ)法類型，即可完成語(yǔ)法的高亮顯示。

實(shí)例 1：

#### 高亮 Html 代碼
?```html
<!DOCTYPE html>
<html>
	<head><title>highlight</title></head>
	<body>
		<p>Hello world</p>
	</body>
</html>
?```

其渲染結(jié)果如下：

圖片描述

其轉(zhuǎn)換后的 html 的內(nèi)容如下：

<pre class="editor-colors lang-html">此處省略</pre>

可以看到，轉(zhuǎn)換后的代碼中增加了 lang-html 這樣的樣式。

2.2 切換高亮的樣式

以 Typora 為例，Typora 使用的是 CodeMirror 實(shí)現(xiàn)的高亮，如果需要切換代碼樣式，可以去 CodeMirror 官網(wǎng)下載樣式文件，其官網(wǎng)地址：https://codemirror.net/

  1. 在 CodeMirror 官網(wǎng)上選擇心儀的樣式（比如：material），樣式選擇頁(yè)：Theme demo；
  2. 打開(kāi) Typora 樣式目錄，“設(shè)置” -> “外觀” -> “打開(kāi)主題文件夾”；

圖片描述

  1. 復(fù)制 github.css 和 github 文件夾，將 css 文件更名為 material.user.css，將文件夾更名為 material；
  2. 編輯 material.user.css 文件，將在 CodeMirror 網(wǎng)站上選擇的樣式內(nèi)容復(fù)制到 css 文件中 下載地址，并將所有 material 批量 替換成 inner；

圖片描述

  1. 重啟 typora，并選擇 material 主題，此時(shí)可以看到所有代碼塊的樣式已經(jīng)改變。

圖片描述

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. 使用場(chǎng)景及實(shí)例

代碼塊作為對(duì)代碼段落的增強(qiáng)功能，目的是使文檔中出現(xiàn)的代碼塊在表現(xiàn)時(shí)可以更為清晰有層次。

實(shí)例 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!")
}
?```

渲染結(jié)果如下：

圖片描述

4. 小結(jié)

  • 語(yǔ)法高亮是 Markdown 的擴(kuò)展功能，寫(xiě)作者是否可以實(shí)現(xiàn)語(yǔ)法高亮需要依賴其所用編輯器或渲染工具的支持能力與配置；
  • 語(yǔ)法高亮擴(kuò)展了 Markdown 代碼塊的功能，實(shí)現(xiàn)方式是在代碼塊的起點(diǎn)增加語(yǔ)法聲明；
  • 由于插件支持度不同、主題不同，不同環(huán)境下的高亮輸出結(jié)果也可能不同；
  • 寫(xiě)作者可以自定義高亮效果或者高亮主題，具體方法需要參考對(duì)應(yīng)的高亮插件。