Prism官网点这里:Prism.com
你也可以先在这个官方在线示例感受一下。

准备

打开Prism官方的下载页面
有多款风格可以选择。
Themes.png

然后是选择语言,你选的越多后面生成的js和css也越大,看自己需求选择。
Languages.png

再下面就是是插件支持,也是看需求选择。
Plugins.png

选择好后,就下载生成好的prism.js和prism.css文件。
把这两个文件上传到到网站目录,在网站head引入prism.js和prism.css,链接位置自己改

<link href="prism.css" rel="stylesheet" />;
<script src="prism.js"></script>;

HTML中使用方法

<pre class="line-numbers">
    <code class="language-HTML">
        这里写内容
    </code>
</pre>

line-numbers便是显示行号,language-HTML就是语言。其它的功可以参考官方文档


本文标签: 教程, JavaScript, Prismjs

本文采用 《知识共享署名-相同方式共享 4.0 国际许可协议》 进行许可。