saber酱的抱枕

生于忧患,死于安乐

11/12
21:41
软件

使用 prismjs 高亮 markdown 渲染出的代码

markdown 里的代码块用三个斜线包裹,可以指定代码的语言。如下

```javascript
let result = new Array(20).fill(0)
```

当 markdown 转换成 html 显示时,上面的写法会渲染出 pre 和 code 标签,并且 class 里带有语言信息:

但是此时代码并不会自动高亮。有个叫做 Prism 的 js 库经常被用来高亮 markdown 在 html 渲染出的代码。

打开 Prism 的下载页面:
https://prismjs.com/download.html

在这个页面上,你可以选择要使用的主题风格(在该页面底部的代码区域可以预览主题的效果),然后勾选你会使用到的语言。最后点击底部按钮,下载生成的 js 和 css 文件。

把生成的 js 和 css 文件传到网站上,在页面上引用,这时 markdown 生成的代码就有高亮效果了。

<link rel="stylesheet" href="/wp-content/themes/prism.css">
<script src="/wp-content/themes/prism.js" type="text/javascript" async></script>

Prism 运行的原理就是找到页面上 class="language-*" 的元素,对齐进行高亮。所以如果你没有使用 markdown,你也可以直接把代码写在 code 标签里,然后设置对应语言的 class,这样 Prism 也可以对其进行高亮。

使用 prismjs 高亮 markdown 渲染出的代码