V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pheyer
V2EX  ›  程序员

GitBook 自定义代码高亮问题

  •  
  •   pheyer · 2015-11-01 10:35:21 +08:00 · 9882 次点击
    这是一个创建于 3070 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近 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 里?

    7 条回复    2015-11-01 22:02:19 +08:00
    phyng
        1
    phyng  
       2015-11-01 10:42:30 +08:00
    使用这个插件 https://github.com/gaearon/gitbook-plugin-prism ,然后可能要修改一下 https://github.com/gaearon/gitbook-plugin-prism/blob/master/index.js 里面的这一行 var prismCSS = require.resolve('prismjs/themes/prism.css');,改成你要的 themes/prism-okaidia.css
    pheyer
        2
    pheyer  
    OP
       2015-11-01 10:54:03 +08:00
    @phyng 你说的链接我看到过,下载这个插件的命令应该是 npm install gitbook-plugin-prism
    -g 。问题是如果我修改了 index.js ,不就是更新了插件源码吗,我怎么重新编译插件?或者说不用编译,找到插件路径修改就行?如果是的话这个路径在哪里?
    还有 themes/prism-okaidia.css 这个路径在我安装了插件之后就有了吗?或者还是要我自己提供?
    抱歉,新手总是有些不明白的地方
    phyng
        3
    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
        4
    pheyer  
    OP
       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/这个网页的里面代码那么饱满
    pheyer
        5
    pheyer  
    OP
       2015-11-01 19:45:52 +08:00
    @pheyer 偶然发现字体单薄是在 Chrome 中比较明显,在 Firefox 中好多了, Mac 环境
    phyng
        6
    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
    pheyer
        7
    pheyer  
    OP
       2015-11-01 22:02:19 +08:00
    @phyng 嗯, bug 解决了
    目前也就看看网页了,试了一转换成 EPUB, Mobi, PDF 格式,代码显示乱得一塌糊涂,坑还是有很多,就不管了吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3239 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:06 · PVG 20:06 · LAX 05:06 · JFK 08:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.