文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

18 Markdown 代码高亮

发布于 2020-06-06 11:00:33 字数 5318 浏览 1559 评论 0 收藏 0

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!")
}
```

渲染结果如下：

图片描述