如何利用prism.js实现代码高亮?

从prism.js的网站上可以下载自己需要的样式.

如何利用prism.js实现代码高亮?_第1张图片
样式选择

选择python. 主题选择是因为跟我们pycharm当前使用的主题比较类似.


如何利用prism.js实现代码高亮?_第2张图片
TomorrowNight主题

在链接的底部有下载链接.CSS与JS都需要下载.


如何利用prism.js实现代码高亮?_第3张图片
下载

把下载的文件放在static文件夹

如何利用prism.js实现代码高亮?_第4张图片
目录结构

在html文件中引用

如何利用prism.js实现代码高亮?_第5张图片
image.png

prism.js要放在html的末尾.它是等到原来的html渲染之后再去改造元素的innerHtml.

实施异步加载

如何利用prism.js实现代码高亮?_第6张图片
js代码

我们需要编辑代码,因此每次出现新的代码的时候,需要prism.js来得到新的innerHtml.因此每当我们修改了代码区域的textContent之后,就要运行Prism.highlightElement函数来执行语法高亮.

Prism的插件

如果想开发自定义的Prism插件的话可以参考他们的文档

你可能感兴趣的:(如何利用prism.js实现代码高亮?)