Npcink Blog
切换菜单

Prism- 轻巧，健壮，优雅的语法高亮显示

Prism 是一个轻量，健壮，优雅的语法高亮库。

发布于
本页目录5 节

Prism 是一种轻量级的，可扩展的语法突出显示工具，其构建考虑了现代 Web 标准。它已在数千个网站中使用，其中包括您每天访问的网站。

来源于 GitHub，于 2019 年 11 月 19 号下载。

  • 简单了，包括 prism.css 和 prism.js，使用正确的 HTML5 代码标签（code.language-xxxx），完成！
  • 直观语言类是继承的，因此您只能为多个代码段定义一次语言。
  • 轻如羽毛核心缩小并压缩为 2KB。每种语言添加 0.3-0.5KB，主题大约 1KB。
  • 快速燃烧支持 Web Workers 的并行性（如果有）。
  • 可扩展定义新语言或扩展现有语言。借助 Prism 的插件架构，添加新功能。
  • 易造型的所有造型是通过 CSS 完成的，用理智的类名一样.comment，.string，.property等

第三方教程：

社区成员编写了一些教程，以帮助您将 Prism 集成到多种不同的网站类型和配置中：

请注意，此处列出的教程未经过验证以包含正确的信息。请自担风险，如果有任何问题，请务必在此处检查官方文档:)

基本用法：

您需要在页面中包含您下载的prism.css和prism.js文件。例：

<!DOCTYPE html>
<html>
<head>
  ...
  <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
  ...
  <script src="prism.js"></script>
</body>
</html>

棱镜会尽力鼓励良好的创作习惯。因此，它仅适用于元素，因为标记没有元素的代码在语义上是无效的。 根据 HTML5 规范，定义代码语言的推荐方法是类，这是 Prism 使用的类。另外，Prism 还支持较短的版本：。<code><code>language-xxxxlang-xxxx

为了使事情变得更容易，Prism 假定此语言定义是继承的。因此，如果多个元素具有相同的语言，则可以将类添加到它们的共同祖先之一上。这样，还可以通过在或元素上添加一个类来定义文档范围的默认语言。<code>language-xxxxlanguage-xxxx<body><html>

如果要选择不突出显示是使用已声明代码语言的元素的后代的元素的突出显示，则可以向其添加类（或实际上是任何不存在的语言）。<code>language-none

的来标记码块推荐的方法 （无论是语义和棱镜）是与元件元件内部，像这样：<pre><code>

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

如果您使用该模式，则会自动获取该类（如果尚不具备该类），并将其样式化为代码块。<pre>language-xxxx

如果你想阻止自动突出显示的任何元素，而使用的 API，可以设置到了之前触发事件。通过在包含 Prism 核心的元素上设置属性，此操作将自动完成。例：Prism.manualtrueDOMContentLoadeddata-manual<script>

<script src="prism.js" data-manual></script>

要么

<script>
window.Prism = window.Prism || {};
window.Prism.manual = true;
</script>
<script src="prism.js"></script>

CDN 的用法

与 CDN 结合使用时，我们建议使用 Autoloader 插件，该插件会在必要时自动加载语言。

自动装带器的设置如下所示。当然，您也可以自己定义主题。

<!DOCTYPE html>
<html>
<head>
  ...
  <link href="https://myCDN.com/prism@v1.x/themes/prism.css" rel="stylesheet" />
</head>
<body>
  ...
  <script src="https://myCDN.com/prism@v1.x/components/prism-core.min.js"></script>
  <script src="https://myCDN.com/prism@v1.x/plugins/autoloader/prism-autoloader.min.js"></script>
</body>
</html>

提供 PrismJS 的 CDN 例如 cdnjs 和 jsDelivr。

与 Webpack，Browserify 和其他捆绑软件一起使用

如果要将 Prism 与捆绑器一起使用，请使用npm以下命令安装 Prism ：

Terminal window
$ npm install prismjs

然后，您可以import进入捆绑包：

import Prism from 'prismjs';

为了仅使用所需的语言和插件轻松配置 Prism 实例，请使用 babel 插件 babel-plugin-prismjs。这将允许您加载最少数量的语言和插件，以满足您的需求。有关配置详细信息，请参见该插件的文档。

节点使用

如果要在服务器上或通过命令行使用 Prism，Prism 也可以与 Node.js 一起使用。如果您尝试针对不支持浏览器端 JS 的环境（例如 AMP pages）生成带有突出显示代码的静态 HTML 页面，则可能会很有用。

例：

const Prism = require('prismjs');


// The code snippet you want to highlight, as a string
const code = `var data = 1;`;


// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

需要prismjs将加载默认的语言：markup，css， clike和javascript。您可以使用该实用程序加载更多语言，该 实用程序将自动处理任何必需的依赖项。loadLanguages()

例：

const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['haml']);


// The code snippet you want to highlight, as a string
const code = `= ['hi', 'there', 'reader!'].join " "`;


// Returns a highlighted HTML string
const html = Prism.highlight(code, Prism.languages.haml, 'haml');

注意：不要不使用带有的 WebPack 或其他打捆，因为这将导致的 WebPack 包括所有的语言和插件。使用上述的 babel 插件。loadLanguages()