Docsify 代码高亮

来自泡泡学习笔记
BrainBs讨论 | 贡献2023年8月3日 (四) 00:32的版本 (创建页面,内容为“'''docsify'''内置的代码高亮工具是 [https://github.com/PrismJS/prism Prism]。Prism 默认支持的语言如下: * Markup - <code>markup</code>, <code>html</code>, <code>xml</code>, <code>svg</code>, <code>mathml</code>, <code>ssml</code>, <code>atom</code>, <code>rss</code> * CSS - <code>css</code> * C-like - <code>clike</code> * JavaScript - <code>javascript</code>, <code>js</code> [https://prismjs.com/#supported-languages 添加额外的语法…”)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳到导航 跳到搜索

docsify内置的代码高亮工具是 Prism。Prism 默认支持的语言如下:

  • Markup - markup, html, xml, svg, mathml, ssml, atom, rss
  • CSS - css
  • C-like - clike
  • JavaScript - javascript, js

添加额外的语法支持需要通过CDN添加相应的语法文件 :

<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-php.min.js"></script>

要使用语法高亮,需要在代码块第一行添加对应的语言声明,示例如下:

```html
<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
```

```bash
echo "hello"
```

```php
function getAdder(int $x): int 
{
    return 123;
}
```

上面代码的渲染结果:

<p>This is a paragraph</p>
<a href="//docsify.js.org/">Docsify</a>
echo "hello"
function getAdder(int $x): int 
{
    return 123;
}