GitBook 自定义代码高亮问题

最近 Swift 2.1 版本发布，觉得 Swift 也差不得稳定，可以开始学习了。于是就下载了《 the-swift-programming-language-in-chinese 》电子书开始慢慢学习。

学习过程中发现不太喜欢里面的代码高亮（提供的 PDF 和 EPub 格式甚至没有代码高亮），想换成如同Prism Demo - Okaidia Theme一样的代码高亮方式。这是我在使用了 MacDown 这个软件写 MarkDown 文章后，发现的一个不错黑底代码高亮风格，在 MacDown 里面的名字是 Github2 css/okaidia ，全名大概是 Prism Okaidia Theme 。

各种搜索，找到了两种相关的 okaidia 代码高亮资源，但问题是不知道怎么用。

第一种是在 npmjs 上找到的prismjs-okaidia-theme，这应该可以通过下面的命令进行安装：

npm install prismjs-okaidia-theme -g

但是安装之后怎么应用到 GitBook 上，我没找到答案。

第二种是去这个链接里手动配置代码高亮样式并下载 js 与 css 文件，同样是在使用上遇到难题。有一个相关的资料：根据Introduction | Swift Codeblocks Syntax Highlight， Coding 和 Gitbook 都通过 highlightjs 支持 swift 语法高亮。其中有这么一句：一般 html 解决办法见highlight.js，需要 xcode.css 、 highlight.pack.js ，看了一下还是没怎么搞懂。

也是学习 Swift 才第一次接触 GitBook ，很多东西包括 Js 与 NPM 都不甚了解，所以在这里求教一下 GitBook 高手，应该怎么把上面的代码高亮资源应用到 GitBook 里？

pheyer

2015-11-01 10:54:03 +08:00

@phyng 你说的链接我看到过，下载这个插件的命令应该是 npm install gitbook-plugin-prism
-g 。问题是如果我修改了 index.js ，不就是更新了插件源码吗，我怎么重新编译插件？或者说不用编译，找到插件路径修改就行？如果是的话这个路径在哪里？
还有 themes/prism-okaidia.css 这个路径在我安装了插件之后就有了吗？或者还是要我自己提供？
抱歉，新手总是有些不明白的地方

phyng

2015-11-01 12:21:32 +08:00

@pheyer
1. 是的， js 不需要编译
2. npm 加 -g 参数默认是安装在系统目录，不加 -g 默认安装路径在项目文件夹下的 node_modules/
3. npm 通过 package.json 配置， gitbook-plugin-prism 项目的 package.json 里面写明了依赖 prismjs ，安装的时候会自动下载 prism
4. gitbook 的插件是通过 book.json 设置，但是每次改动插件需要通过 gitbook install 加载
---
我闲着试了一下，这个插件不完善， prism-okaidia.css 优先级不高，我简单的加了一些 important ……
Github ： https://github.com/phyng/gitbook-plugin-prism-test
Demo ： http://phyng.com/gitbook-plugin-prism-test/

pheyer

2015-11-01 18:09:28 +08:00

@phyng 谢谢，现在差不多实现我想要的效果了，不过貌似有点小 bug
关于你说的 important 我是用代码比较才知道哪些是要加 important 的，大概改动了三个文件。
bug 代码示例：
```
let initialBits: UInt8 = 0b00001111
let invertedBits = ~initialBits // 等于 0b11110000
```
当类似上面的代码没有指定语言时，显示的效果是完全黑块，字体居然是黑色了——是在前面的 Swift 书中发现的，好多代码块都没有指定语言😂
另外一个问题是代码高亮的字体好像比较单薄，从你给的 Demo 里就可以看出来，不如 http://colobu.com/2014/10/09/gitbook-quickstart/这个网页的里面代码那么饱满

phyng

2015-11-01 20:33:10 +08:00

@pheyer 字体问题大概因为你给的链接里面的字体大小是 16px ，然后可能还跟 font-family 也有关，这些都是 CSS 的问题；没有指定语言的时候 markdown 解析器自然不会高亮(高亮就是解析语言不同的 token 加上不同的 class 再通过设置不同 class 的样式)，可以写个程序给源文件指定一下语言
--
修正了没有语言的效果，字体大小设置为 16px ，(CSS 里面使用 !important 是很脏的代码- -!)： https://github.com/phyng/gitbook-plugin-prism-test/commit/92036de20f22df166ece9aec57b6fe9bcd9b17f7