折腾：
期间，发现gitbook自带的代码高亮感觉不够好看：
想要找个好看的代码高亮的插件。比如深色背景的。
prism-themes | GitBook Plugins
PrismJS/prism-themes: A wider selection of Prism themes
去加上配置：
“plugins”: [
“-lunr”,
“-search”,
“search-plus”,
“disqus”,
“-highlight”,
“prism”,
“prism-themes”
],
“pluginsConfig”: {
“theme-default”: {
“showLevel”: true
},
“disqus”: {
“shortName”: “crifan”
},
“prism”: {
“css”: [
“prism-themes/themes/prism-duotone-dark.css”
]
}
}
再去安装：
➜ htttp_summary git:(master) ✗ gitbook install
info: installing 4 plugins using [email protected]
info:
info: installing plugin “search-plus”
info: install plugin “search-plus” (*) from NPM with version 1.0.3
info: >> plugin “search-plus” installed with success
info:
info: installing plugin “disqus”
info: install plugin “disqus” (*) from NPM with version 0.1.0
info: >> plugin “disqus” installed with success
info:
info: installing plugin “prism”
info: install plugin “prism” (*) from NPM with version 2.3.0
/Users/crifan/GitBook/Library/Import/htttp_summary
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └─┬ [email protected]
│ └─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ └── [email protected]
info: >> plugin “prism” installed with success
info:
info: installing plugin “prism-themes”
runTopLevelLifecycles → 2 ▐ ╢████████████████████████████████████████████████████████████████████████████████████████████████████░░░░╟
/Users/crifan/GitBook/Library/Import/htttp_summary
│ └── [email protected]
info: >> plugin “prism-themes” installed with success
效果：
然后换成其他的试试：
去
https://github.com/PrismJS/prism-themes
看效果
去试试
“prism-themes/themes/prism-duotone-sea.css”
效果：
还是试试其他的：
再回去。
参数：
“prism-themes/themes/prism-hopscotch.css”
效果是：
然后重新试试另外几个效果：
<code>"prism-themes/themes/prism-hopscotch.css" </code>
效果：
“prism-themes/themes/prism-atom-dark.css”
效果：
很不错，就用这个了。
【总结】
配置book.json：
<code> "plugins": [
"-highlight",
"prism",
"prism-themes"
],
"pluginsConfig": {
"prism": {
"css": [
"prism-themes/themes/prism-atom-dark.css"
]
}
}
</code>安装插件：
<code>gitbook install </code>
效果：
而对于不同的主题，可以去：
https://github.com/PrismJS/prism-themes
看看有哪些，效果如何。
然后可以在安装了插件后可以通过：
<code>➜ htttp_summary git:(master) ll node_modules/prism-themes/themes/ total 112 -rw-r--r-- 1 crifan staff 2.0K 8 14 2016 prism-atom-dark.css -rw-r--r-- 1 crifan staff 3.2K 8 14 2016 prism-base16-ateliersulphurpool.light.css -rw-r--r-- 1 crifan staff 3.0K 8 14 2016 prism-cb.css -rw-r--r-- 1 crifan staff 3.3K 8 14 2016 prism-duotone-dark.css -rw-r--r-- 1 crifan staff 3.3K 8 14 2016 prism-duotone-earth.css -rw-r--r-- 1 crifan staff 3.3K 8 14 2016 prism-duotone-forest.css -rw-r--r-- 1 crifan staff 3.3K 8 14 2016 prism-duotone-light.css -rw-r--r-- 1 crifan staff 3.3K 8 14 2016 prism-duotone-sea.css -rw-r--r-- 1 crifan staff 3.3K 8 14 2016 prism-duotone-space.css -rw-r--r-- 1 crifan staff 2.2K 8 14 2016 prism-ghcolors.css -rw-r--r-- 1 crifan staff 1.9K 8 14 2016 prism-hopscotch.css -rw-r--r-- 1 crifan staff 3.8K 8 14 2016 prism-pojoaque.css -rw-r--r-- 1 crifan staff 2.4K 8 14 2016 prism-vs.css -rw-r--r-- 1 crifan staff 3.3K 8 14 2016 prism-xonokai.css </code>
看到有哪些主题的css，换成其他的，比如：
<code>"prism-themes/themes/prism-duotone-dark.css" "prism-themes/themes/prism-hopscotch.css" </code>
即可看到不同的效果。
转载请注明：在路上 » 【已解决】gitbook安装代码高亮插件：Prism