prism 使用说明语法高亮高亮代码代码高亮

常用的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>