在 HTML 文件中使用
引入cdn文件
使用CDN链接引入必备的文件,一个css，一个js文件。如下： (注意个别站点的cdn链接国内有时候无法访问,用之前可以先在浏览器测试一下)
<!DOCTYPE html> <html> <head> <title>Prism</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script> </body> </html>
高亮显示代码
CSS， JS如果是直接高亮显示
代码，写在 <pre><code> ... </code></pre> 中，设置对应的 language-xxx 属性，如直接显示css,js代码，高亮显示效果
... <body> CSS <pre><code class="language-css">p { color: red; }</code></pre> JavaScript <pre><code class="language-js">function getName() { return 'Mike'; }</code></pre> <pre><code class="language-js">function getName() { return 'Mike'; }</code></pre> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script> </body> ...
代码格式化显示需要单独处理, 如js代码格式化高亮显示
<pre><code class="language-js">function getName() { return 'Mike'; }</code></pre> 复制代码
HTML
直接在 <pre><code> 标签中显示 HTML 内容是不能直接高亮显示原代码的，浏览器会直接解析标签，如 <h1>Title</h1>
HTML <pre><code class="language-markup"><h1>Title</h1></code></pre> <pre><code class="language-html"><h1>Title</h1></code></pre> 复制代码
正确高亮显示 HTML 需要引入 plugin 解决， 一个 css prism-unescaped-markup.min.css, 一个 js prism-unescaped-markup.min.js, 使用 script type="text/plain" 包一下
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/unescaped-markup/prism-unescaped-markup.min.css" rel="stylesheet" /> ... HTML code <pre><code><script type="text/plain" class="language-markup"><h1>Title</h1></script></code></pre> ... <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/unescaped-markup/prism-unescaped-markup.min.js"></script> 复制代码
高亮显示外部文件
如果代码太多，又需要格式化显示，可以使用外部文件的方式, 使用 <pre> 标签的 data-src 属性引入文件. 默认支持 html,css,js,svg 等
HTML file <pre data-src="./assets/index.html"></pre> CSS File <pre data-src="./assets/main.css"></pre> JS File <pre data-src="./assets/code.js"></pre> SVG File <pre data-src="./assets/logo.svg"></pre> 复制代码
如果高亮显示 python 外部文件代码，需要引入一个 plugin prism-autoloader.min.js 文件. 其他类型同样思路 (注意文件引入顺序)
... <body> ... HTML file <pre data-src="./assets/index.html"></pre> CSS File <pre data-src="./assets/main.css"></pre> JS File <pre data-src="./assets/code.js"></pre> Python File <pre data-src="./assets/code.py"></pre> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/plugins/autoloader/prism-autoloader.min.js"></script> </body> ...
总结
目前体验的功能就那么多，还有一些其他特性没用到，主要用于基本了解和练习，实际使用的时候有问题再进行记录，下一步在 vue 项目里使用 Prism。
