您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Markdown 代码高亮

1. 前言

Markdown 的是对块语法的扩展。即通过对块进行语法标注,对其在渲染时匹配不同的样式。

模块是 Markdown 的一种扩展语法,通常通过第三方的高亮完成。常见的高亮实现如 Typora 使用的 「」,还有在网页中应用较多的 「」等。大部分的 Markdown 编辑器或者编辑环境都已经集成好,只要按照其语法规范,在文档完成渲染后即可得到带有高亮样式的块了。

环境说明
考虑到 Markdown 工具之不兼容,有的直接从复制粘贴到本地不会正常,大家学习时自己动手写是肯定没问题的。本节所有实例及演示均使用 Typora 工具完成。

2. 语法详解

在 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 这样的样式。

以 Typora 为例,Typora 使用的是 CodeMirror 实现的高亮,如果需要切换样式,可以去 CodeMirror 官网下载样式,其官网地址:

在 CodeMirror 官网上选择心仪的样式(比如:material),样式选择页:;

打开 Typora 样式目录,“设置” -> “外观” -> “打开夹”;

复制 github.css 和 github 夹,将 css 更名为 material.user.css,将夹更名为 material;

编辑 material.user.css ,将在 CodeMirror 网站上选择的样式复制到 css 中 ,并将所有 material 批量 替换成 inner

重启 typora,并选择 material ,此时可以看到所有块的样式已经改变。

3. 使用场景及实例

块作为对段落的增强,目的是使文档中出现的块在表现时可以更为清晰有层次。

实例 2:各式各样的

#### 各式各样的 Hello world```java
// Java
class HelloWorld {    public static void main(String[] args) {        Sy.out.println("Hello, world!");    }}
```

```python# Pythonprint("Hello, world!")
```

```ruby# Rubyputs "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 块的,实现方式是在块的起点语法声明;

由于度不同、不同,不同环境下的高亮结果也可能不同;

写作者可以高亮或者高亮,具体需要参考对应的高亮。


联系我
置顶