+
+ +
+
+ +
+
+ +
+ +

代码高亮

+

使用 gitbook 默认高亮

+

对于大多数被广泛使用的语言，无需做任何配置，在 markdown 中插入代码块就行。

+

但是如果你要插入一种未被支持的语言，代码块就没有任何高亮，看起来比较丑。

+

下面给出我的一种解决方案：

+

使用 prism 插件

+

禁用 gitbook 默认高亮并使用 prism 高亮插件：

+
// book.json
+{
+    "plugins": [
+        "-highlight",
+        "prism"
+    ],
+    "pluginsConfig": {
+        "prism": {
+            // 设置个人比较喜欢的暗色调主题
+            // 可以去同目录下找更多的主题
+            "css": ["prismjs/themes/prism-tomorrom.css"]
+        }
+    }
+}
+
+

随后通过 gitbook install 安装插件。

+

最后 gitbook build 就可以看到效果了。

+

添加自己的语言支持

+

在安装 prism 插件后，我们可以看一下 node_modules/prismjs/components 文件夹，里面包含了目前可用的所有语言支持。比如说有一个 prism-c.js ，那么就表明支持 C 语言。

+

下面以我支持 riscv 汇编高亮的流程来举例说明一下：

+
    +

  1. 写一个 prism-riscv.js 并复制到 components 文件夹下，可在这里找到。 +这里面只进行简单的词法分析，使用一个正则表达式 pattern 来匹配一种词，并使用别名 alias 来描述这种词的类型，其实也就是决定最后渲染出来这种词的颜色。

    +

    我这里大概就是寄存器一种颜色，指令一种颜色，伪指令一种颜色。对于汇编语言这也就够了。

    +

    然而 prism 还支持更高级一点的语法分析。

    +
    2. +

  2. 将你的语言注册到 node_modules/prismjs/components.json。

    +

    打开看一下，就是在 languages 插入一个描述你的语言的贡献者和名字的键值对。

    +

    我的代码如下：

    +
    3. +
+
# add_riscv_component.py
+
+import json
+
+json_path = 'node_modules/prismjs/components.json'
+
+data = json.load(open(json_path))
+data['languages']['riscv'] = {'title': 'RISC-V', 'owner': 'shinbokuow2'}
+with open(json_path, 'w') as f:
+f.write(json.dumps(data, sort_keys = True, indent = 4))
+
+

如果只是自己用的话这就够了，想要为 prism 社区做贡献的参考这里。

+

在 gitbook build 之前做完上面两步，build 之后你会发现 riscv 代码块被正确高亮了！

+

行内代码

+

gitbook 默认的行内代码和普通字体是一个颜色，我们希望它在灰色背景的同时字体变为红色，更加显眼。

+

我的做法是在 gitbook build 之后直接暴力改生成的 css 。这个 css 放在 docs/gitbook/style.css。（build 之后的结果本来应该放在 _book 文件夹下，为了套用 Github Page 将其重命名为 docs）

+
# add_code_style.py
+
+s = open('docs/gitbook/style.css').read()
+code = 'markdown-section code{'
+color_red = 'color:#bf616a;'
+code_in_pre = 'markdown-section pre>code{'
+color_inherit = 'color:#ccc;'
+s = s.replace(code, code + color_red)
+s = s.replace(code_in_pre, code_in_pre + color_inherit)
+with open('docs/gitbook/style.css', 'w') as f:
+    f.write(s)
+
+

+ +
+ + +

+ + +
+ +
+
+
+ +

results matching ""

+
    + +
    +
    + +

    No results matching ""

    + +
    +
    +
    + +
    +
    +
    + +

    results matching ""

    +
      + +
      +
      + +

      No results matching ""

      + +
      +
      +
      + +
      +