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

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

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

官方介绍： https://prismjs.com/
官方下载： https://prismjs.com/download.html
官方演示： https://prismjs.com/test.html
Github： https://github.com/PrismJS/prism/
中文文档： https://www.awesomes.cn/repo/PrismJS/prism

本站下载：

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

[zrz_file link="https://cdn.getimg.net/npc/2019/github/prism-v20191119.zip" name="prism-v20191119.zip" code=""]

简单了，包括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 ：

$ 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()

{{userData.name}}已认证