查看“Docsify 代码高亮”的源代码

'''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 添加额外的语法支持]需要通过CDN添加相应的[https://cdn.jsdelivr.net/npm/prismjs@1/components/ 语法文件] :

<pre lang="html"><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></pre>
要使用语法高亮，需要在代码块第一行添加对应的[https://prismjs.com/#supported-languages 语言声明]，示例如下:

<pre>```html
&lt;p&gt;This is a paragraph&lt;/p&gt;
&lt;a href=&quot;//docsify.js.org/&quot;&gt;Docsify&lt;/a&gt;
```

```bash
echo &quot;hello&quot;
```

```php
function getAdder(int $x): int 
{
    return 123;
}
```</pre>
上面代码的渲染结果:

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