筛选

简介

插件简介

PrismJS 是一个轻量级、易于使用、且支持多种编程语言的语法高亮显示库。
它允许开发者在网页上以美观的方式展示代码片段，提高代码的可读性和用户体验。PrismJS 的设计哲学是模块化，允许开发者只包含他们需要的部分，从而减小最终文件的大小。
官网地址：https://prismjs.com/

特点

轻量级‌：PrismJS 的核心库非常小（压缩后约 2KB），并且支持按需加载，只包含需要的语言和主题。

‌易于使用‌：只需引入 CSS 和 JS 文件，不需要复杂的配置。

‌支持多种语言‌：PrismJS 支持包括 JavaScript、CSS、HTML、Python、Java 等在内的多种编程语言。

‌模块化‌：允许只加载需要的组件，减少不必要的代码。

‌可定制‌：提供多个主题供选择，同时也支持自定义主题。

‌插件系统‌：通过插件系统可以扩展 PrismJS 的功能，如行号显示、代码复制按钮等。

使用说明

常用的cdn资源路径 

<link rel="stylesheet" href="//php.bian-jie.cn/interface/staticDownload/prism/prism.min.css" />
<link rel="stylesheet" href="//php.bian-jie.cn/interface/staticDownload/prism/prism-line-numbers.min.css" />
<link rel="stylesheet" href="//php.bian-jie.cn/interface/staticDownload/prism/prism-okaidia.min.css" />

<script src="//php.bian-jie.cn/interface/staticDownload/prism/prism.min.js"></script>
<script src="//php.bian-jie.cn/interface/staticDownload/prism/prism-line-numbers.min.js"></script>
<script src="//php.bian-jie.cn/interface/staticDownload/prism/prism-php.min.js"></script>
<link rel="stylesheet" href="//php.bian-jie.cn/interface/staticDownload/prism/prism.css" />
<link rel="stylesheet" href="//php.bian-jie.cn/interface/staticDownload/prism/prism-line-numbers.css" />
<link rel="stylesheet" href="//php.bian-jie.cn/interface/staticDownload/prism/prism-okaidia.css" />

<script src="//php.bian-jie.cn/interface/staticDownload/prism/prism.js"></script>
<script src="//php.bian-jie.cn/interface/staticDownload/prism/prism-line-numbers.js"></script>
<script src="//php.bian-jie.cn/interface/staticDownload/prism/prism-php.js"></script>

主题风格

默认灰色背景颜色的主题风格
可以使用已经存在主题、自定义主题风格风格，但是必须引入对应的主题风格css文件。

行间样式的主题风格的css文件，名称格式为“*-line-numbers”，如下：
https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.css 
// Prism.js 提供了多个内置主题，你可以选择一个喜欢的主题并引入对应的 CSS 文件。

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css" rel="stylesheet" />
// 如果内置主题无法满足需求，你可以创建自定义主题。创建一个自定义主题只需要定义一个新的 CSS 文件，覆盖 Prism.js 默认的样式。

/* 自定义代码高亮样式 */
code[class*="language-"],pre[class*="language-"] {  font-family: 'Courier New', Courier, monospace; background: #f5f5f5; color: #333; padding: 1em; border-radius: 5px;  }
.token.keyword {  color: #0070d1; font-weight: bold;  }  /* 自定义关键字样式 */
.token.function {  color: #d73a49;  }  /* 自定义函数样式 */
.token.comment {  color: #6a737d; font-style: italic;  }  /* 自定义注释样式 */
.token.string {  color: #032f62;  }  /* 字符串颜色 */
.token.number {  color: #d73a49;  }  /* 数字颜色 */
/* ...你可以继续添加更多自定义样式 */

支持的编程语言种类

在大多数情况下，Prism.js的核心库已经包含了常见语言的支持，包括HTML、javascript、css等。因此，你通常不需要单独引入HTML语言的支持文件（如上面的注释所示）。
但是一些不常见的语言，如果默认不支持该类型的种代码，需要引入对应的高亮css文件。
使用language-{language}类来指定代码的语言。
如：
    language-html
    language-javascript
    language-css
    language-php

初始化

在大多数情况下，Prism.js会自动初始化并高亮页面上的代码块。但是，如果你在某些特定情况下需要手动初始化，你可以使用Prism.js提供的API。
    Prism.highlightAll();

或者，如果你只想高亮特定的代码块，你可以传递一个DOM元素给Prism.highlightElement函数。
    var codeBlock = document.querySelector('pre[class*="language-"]');
    Prism.highlightElement(codeBlock);

使用 

<!-- 引入行号插件的CSS -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" />
<!-- 引入行号插件的JS -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.js"></script>
<!-- 在代码块上添加`line-numbers`类 -->
<pre><code class="language-javascript line-numbers">
// 这是一个带有行号的JavaScript示例
function greet(name) {
    console.log("Hello, " + name + "!");
}
</code></pre>

案例

简单案例：javascript代码的高亮显示

在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<pre><code class="language-javascript">
    // 这里是要高亮显示的代码
    function helloWorld() {
        console.log('Hello, World!');
    }
    helloWorld();
</code></pre>

案例：同时支持多种代码类型的高亮

在线案例源码页面：可以查看、编辑、执行、下载、复制 在线案例源码页 >> 在线案例源码页 >> 
<pre><code class="language-javascript">
    // 这里是要高亮显示的代码
    function helloWorld() {
        console.log('Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!');
    }
    helloWorld();
  </code></pre>
  <pre><code class="language-javascript line-numbers">
    // 这里是要高亮显示的代码
    function helloWorld() {
        console.log('Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!');
    }
    helloWorld();
  </code></pre>


  <pre><code class="language-css">
    .aaa{  color:red;  }
  </code></pre>
  

  <pre><code class="language-html">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sample HTML</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
        <p>This is a sample HTML code block highlighted by Prism.js.</p>

        <div>
          xxxx
          <div>yyyy</div>
        </div>

        <scritp>
          // 这里是要高亮显示的代码
          function helloWorld() {
              console.log('Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!Hello, World!');
          }
          helloWorld();
        </scritp>

        <style>
          .aaa{  color:red;  }
        </style>

    </body>
    </html>
  </code></pre>


  <pre><code class="language-php">
    echo "Hello, World!";
  </code></pre>