5.3 KiB
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 多字最终还没暖热乎就一点都没用上了。
至于那些带着冤魂的文档内容,它就在下面被注释掉的段落里。