前端语法高亮插件Prism.js使用详细教程_Javascript

介绍

最近项目有代码高亮的需求，这边是选用 prism.js 来进行代码高亮。

prism 是一款轻量级、可扩展的语法高亮器，根据现代 web 标准构建，应用广泛。

示例

<!doctype html>
<html>
  <head>
    <!-- 可以通过 cdn 的方式导入 -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>prism test</title>
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
  </head>
  <body>
    <pre class="line-numbers">
      <code class="language-cpp">
        #include &lt;iostream>
        using namespace std;
          
        struct listnode {
          int val;
          listnode *next;
          listnode() : val(0), next(nullptr) {}
          listnode(int x) : val(x), next(nullptr) {}
          listnode(int x, listnode *next) : val(x), next(next) {}
        };  
      </code>
    </pre>

    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"
      integrity="sha256-ronwqxsvaeyrdix7yjfdyj0s5nbema5ilqqtrk25jno="
      crossorigin="anonymous"
    ></script>
  </body>
</html>

主题

prism.js 支持多种主题

插件

prism.js 有多种插件可以使用，这里介绍几个常用的插件。

1、show-language

在代码块中显示代码块对应语言的名称

show language ▲ prism plugins：https://prismjs.com/plugins/show-language

<pre>
  <code class="language-js">
    function curry(func) {
      return function curried(...args) {
        if (args.length >= func.length) {
          return func.apply(this, args);
        } else {
          return function(...args2) {
            return curried.apply(this, args.concat(args2));
          }
        }
      };
    }
  </code>
</pre>

2、line-numbers

在代码块中显示行号

line numbers ▲ prism plugins：https://prismjs.com/plugins/line-numbers/

<pre class="line-numbers">
  <code class="language-js">
    function curry(func) {
      return function curried(...args) {
        if (args.length >= func.length) {
          return func.apply(this, args);
        } else {
          return function(...args2) {
            return curried.apply(this, args.concat(args2));
          }
        }
      };
    }
  </code>
</pre>

通过添加 "line-numbers" class 来为代码块（<pre><code>）添加行号。

如果将 "line-numbers" class 添加到 <body> 中，则为所有代码块（<pre><code>）添加行号。

此外，我们可以使用 "no-line-numbers" class 来移除行号。

3、normalize-whitespace

标准化代码块中的空白字符normalize whitespace ▲ prism plugins：https://prismjs.com/plugins/normalize-whitespace/

默认情况下，该插件会裁剪每个代码块的所有前端和尾部空白字符，并移除每行上多余的缩进和尾部空白字符。

可以通过添加 "no-whitespace-normalization" class 来阻止该插件生效。

示例代码

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>prism test</title>
    <link href="prism.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
  </head>
  <body>
    <pre>
      <code class="language-js">
        function curry(func) {
          return function curried(...args) {
            if (args.length >= func.length) {
              return func.apply(this, args);
            } else {
              return function(...args2) {
                return curried.apply(this, args.concat(args2));
              }
            }
          };
        }
      </code>
    </pre>

    <script src="prism.js"></script>
  </body>
</html>

不使用 normalize-whitespace 插件情况

使用 normalize-whitespace 插件情况

可以看到在使用 normalize-whitespace 插件情况下，代码块前端的空白字符被移除，更为美观。

4、unescaped-markup

编写标记语言而无需转义任何内容

unescaped markup ▲ prism plugins：https://prismjs.com/plugins/unescaped-markup/

可以使用 <script type="text/plain" class="language-markup"> 方式

<script type="text/plain" class="language-markup">
  <html></html>
  <p>example</p>
  <div><button>hello</button></div>
</script>

也可以使用 <pre><code class="language-markup"></code></pre> 方式

<pre>
  <code class="language-markup"><!--
    <html></html>
    <p>example</p>
    <div><button>hello</button></div>
  --></code>
</pre>

5、copy-to-clipboard

添加一个按钮，可以在单击时将代码块内容复制到剪贴板

copy to clipboard ▲ prism plugins：https://prismjs.com/plugins/copy-to-clipboard/默认情况下，插件以英语显示消息，并设置 5 秒的间隔复制时间。

可以使用以下属性来覆盖默认设置：

data-prismjs-copy — 默认情况下复制按钮显示的文字
data-prismjs-copy-error — 复制失败时显示的信息
data-prismjs-copy-success — 复制成功时显示的信息
data-prismjs-copy-timeout — 两次复制允许的间隔时间

<pre>
  <code class="language-js" 
    data-prismjs-copy="复制" 
    data-prismjs-copy-error="复制失败" 
    data-prismjs-copy-success="复制成功"
  >
    let range = new range();
    range.setstart(p1.firstchild, 2);
    range.setendafter(p2.firstchild);
    document.getselection().addrange(range);
  </code>
</pre>

6、show-invisibles

显示隐藏字符，例如制表符和换行符

show invisibles ▲ prism plugins：https://prismjs.com/plugins/show-invisibles/

使用

1、直接下载

在下载界面选择需要的语言和插件，下载 js 和 css，然后导入使用

download ▲ prism：https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript

<!doctype html>
<html>
  <head>
    ...
    <link href="prism.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
  </head>
  <body>
    ...
    <script src="prism.js"></script>
  </body>
</html>

2、cdn 方式

可以使用 cdnjs、jsdelivr 和 unpkg 等 cdn 导入 prismjs

<!doctype html>
<html>
  <head>
    <!-- 通过 cdn 方式导入 -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>prism test</title>
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="external nofollow"  rel="external nofollow"  rel="stylesheet" />
  </head>
  <body>
    <pre class="line-numbers">
      <code class="language-cpp">
        #include &lt;iostream>
        using namespace std;
          
        struct listnode {
          int val;
          listnode *next;
          listnode() : val(0), next(nullptr) {}
          listnode(int x) : val(x), next(nullptr) {}
          listnode(int x, listnode *next) : val(x), next(next) {}
        };  
      </code>
    </pre>

    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"
      integrity="sha256-ronwqxsvaeyrdix7yjfdyj0s5nbema5ilqqtrk25jno="
      crossorigin="anonymous"
    ></script>
  </body>
</html>

3、vue3 中使用

npm install prismjs
# 支持 typescript
npm install @types/prismjs -d
npm install vite-plugin-prismjs -d

vite.config.js 中配置

import prismjs from 'vite-plugin-prismjs';
export default defineconfig({
  plugins: [
    prismjs({
      languages: ['javascript', 'css', 'html', 'json', 'sass', 'scss', 'md', 'bash', 'shell', 'ts'],
      plugins: [
        'toolbar',
        'show-language',
        'copy-to-clipboard',
        'normalize-whitespace',
        'line-numbers',
        'unescaped-markup'
      ],
      theme: 'tomorrow',
      css: true
    })
  ],
});

基本使用

<template>
  <pre class="line-numbers">
    <code class='language-js'>
      // javascript 代码
      function curry(func) {
        return function curried(...args) {
          if (args.length >= func.length) {
            return func.apply(this, args);
          } else {
            return function(...args2) {
              return curried.apply(this, args.concat(args2));
            }
          }
        };
      }
    </code>
  </pre>
</template>
<script setup>
import { onmounted } from 'vue';
import prism from 'prismjs';

onmounted(() => {
  prism.highlightall();
});
</script>
<style lang="scss" scoped></style>

补充

api

prism.js 提供了一些 api

详见：https://prismjs.com/docs/prism.html#.manual

如：

highlight(text, grammar, language) → {string}

// 例子
prism.highlight('var foo = true;', prism.languages.javascript, 'javascript');

按钮样式调节

我们可能对代码块右上角按钮的样式不太满意，可以对此进行一定的调整。

如：

按钮变为方框，改变光标类型

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>prism test</title>

    <link href="prism.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="stylesheet" type="text/css" />
    <style>
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
      }
      div.code-toolbar > .toolbar {
        opacity: 1;
      }
      .toolbar .toolbar-item span,
      .toolbar .toolbar-item button {
        border-radius: 0 !important;
        margin: 0 6px;
      }
      .copy-to-clipboard-button:hover {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <pre class="line-numbers">
      <code class="language-js" 
        data-prismjs-copy="复制" 
        data-prismjs-copy-error="复制失败" 
        data-prismjs-copy-success="复制成功"
      >
        let range = new range();
        range.setstart(p1.firstchild, 2);
        range.setendafter(p2.firstchild);
        document.getselection().addrange(range);
      </code>
    </pre>
    <script src="prism.js"></script>
  </body>
</html>

vue3 代码高亮组件（仅供参考）

在 vue3 中无法使用 <script type="text/plain" class="language-markup"> 方式高亮标记语言。

如果需要实现一个代码高亮组件的话，我们可以使用 <pre><code class="language-xxx"></code></pre> + slot 的方式渲染非标记语言；

使用 <pre><code class="language-markup"></code></pre> + props + prism.highlight + v-html 来渲染标记语言。

高亮 script 标签

使用 <script type="text/plain" class="language-markup"> 方式高亮标记语言时，如果要高亮 <script> 标签则需要转义。

如

<script type="text/plain" class="language-markup">
  <html></html>
  <p>example</p>
  <div><button>hello</button></div>
  <script>&lt;/script>
</script>

此外，在 vue3 中通过 api 渲染 <script> 标签时，转义后，可能会引起 eslint 报错，可以通过配置 'no-useless-escape': 'off' 等方式解决，见配置规则 - eslint - 插件化的 javascript 代码检查工具。

总结

到此这篇关于前端语法高亮插件prism.js使用详细教程的文章就介绍到这了,更多相关前端语法高亮prism.js使用内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！

前端语法高亮插件Prism.js使用详细教程

2024年06月11日 • Javascript •我要评论

介绍

示例

主题

插件