prism.js - 轻量简洁的代码高亮插件

2022-10-26 代码工坊皮蛋优质项目

在 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>
...