ph-bookshelf-wiki/tools/code-highlight.md

title
代码高亮

基于 Prism 的 代码块高亮支持

ph-Bookshelf 默认基于 Prism 支持了代码块高亮，并开放了一些配置可以由你来调整一些代码块的显示样式。

使用 Prism 代码高亮

ph-Bookshelf 默认开启了 Prism 代码高亮支持，你可以将配置节点 prism 设置为 false 来关闭高亮支持。

在 Prism 已经开启的情况下，向代码块添加 css 类 language-xxx 或是 lang-xxx 即可为这个代码块进行高亮着色。

Prism 不会自动为所有代码块着色，所以不指定 language-xxx 即不会对代码块高亮。

你可以在页面 ref: Prism - 支持的语言 找到你可以使用的高亮语言列表。

配置高亮/代码块样式

// todo

添加 Prism 插件

ph-Bookshelf 还添加了可以方便的引入 Prism 的官方扩展插件的支持，你可以借此扩展代码高亮/代码块的使用方式。

只需要使用配置字段 prism.plugins 声明你需要的插件，每个语言名称之间通过 ; 来分隔， ph-Bookshelf 即会自动加载这些插件。

ph-Bookshelf 可以合并不同位置的配置字段：所以在 book.xml 设置了 line-numbers; autolinker，在页面内设置了 command-line 后，最后在这个页面内，将会导入 line-numbers autolinker command-line 三个。

通过 prism.plugins 导入的插件最终将会向页面导入 https://cdn.jsdelivr.net/npm/prismjs@v1.x/plugins/{$plugin}/prism-{$plugin}.min.js{.lang-url} 和 https://cdn.jsdelivr.net/npm/prismjs@v1.x/plugins/{$plugin}/prism-{$plugin}.min.css{.lang-url} 两个文件。这在导入 Prism 官方插件的一般情况下都可以使用。

目前还没有支持从自定义 url 导入。

Known issue - 已知问题

• prism line-numbers 插件会和 bread-card-markdown 的代码块样式表产生兼容性，导致行号无法正常显示。
  • 但是和它差不多的插件 command-line 是可以正常使用的。

---

你知道吗

ph-Bookshelf 本来是使用的 highlight.js 代码高亮库，在写这篇文档的时候，突然就更换为 Prism 库了。于是，你文档作者的 50 行 1500 多字最终还没暖热乎就一点都没用上了。

至于那些带着冤魂的文档内容，它就在下面被注释掉的段落里。