Prism是一種輕量級(jí)的，可擴(kuò)展的語(yǔ)法突出顯示工具，其構(gòu)建考慮了現(xiàn)代Web標(biāo)準(zhǔn)。它已在數(shù)千個(gè)網(wǎng)站中使用，其中包括您每天訪問(wèn)的網(wǎng)站。
- 官方介紹： 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
本站下載：
來(lái)源于Github，于2019年11月19號(hào)下載。
[zrz_file link="https://cdn.getimg.net/npc/2019/github/prism-v20191119.zip" name="prism-v20191119.zip" code=""]
- 簡(jiǎn)單了，包括prism.css和prism.js，使用正確的HTML5代碼標(biāo)簽（
code.language-xxxx），完成！ - 直觀語(yǔ)言類是繼承的，因此您只能為多個(gè)代碼段定義一次語(yǔ)言。
- 輕如羽毛核心縮小并壓縮為2KB。每種語(yǔ)言添加0.3-0.5KB，主題大約1KB。
- 快速燃燒支持Web Workers的并行性（如果有）。
- 可擴(kuò)展定義新語(yǔ)言或擴(kuò)展現(xiàn)有語(yǔ)言。借助Prism的插件架構(gòu)，添加新功能。
- 易造型的所有造型是通過(guò)CSS完成的，用理智的類名一樣
.comment，.string，.property等
第三方教程：
社區(qū)成員編寫了一些教程，以幫助您將Prism集成到多種不同的網(wǎng)站類型和配置中：
- 將<code>或<pre>標(biāo)記內(nèi)的HTML轉(zhuǎn)義為實(shí)體，以使用PrismJS顯示原始代碼
- 如何在您的WordPress網(wǎng)站中實(shí)現(xiàn)Prism.js語(yǔ)法突出顯示
- 使用Prism.js添加語(yǔ)法熒光筆簡(jiǎn)碼|?WPTuts +
- 對(duì)您的Blogger / BlogSpot實(shí)施PrismJs語(yǔ)法突出顯示
- 如何在AJAX內(nèi)容上重新運(yùn)行Prism.js
- 使用Prism.js突出顯示您的代碼語(yǔ)法
- 由Prism.js支持的TYPO3 CMS代碼段內(nèi)容元素
- 使用Angular和Prism.js突出顯示代碼語(yǔ)法
- WordPress塊編輯器Gutenberg中的代碼語(yǔ)法突出顯示
- 在Drupal中使用Prism.js突出顯示代碼
- 使用Prism.js在React中突出顯示代碼
請(qǐng)注意，此處列出的教程未經(jīng)過(guò)驗(yàn)證以包含正確的信息。請(qǐng)自擔(dān)風(fēng)險(xiǎn)，如果有任何問(wèn)題，請(qǐng)務(wù)必在此處檢查官方文檔:)
基本用法：
您需要在頁(yè)面中包含您下載的prism.css和prism.js文件。例：
<!DOCTYPE html> <html> <head> ...<link href="themes/prism.css" rel="stylesheet" /></head> <body> ...<script src="prism.js"></script></body> </html>
棱鏡會(huì)盡力鼓勵(lì)良好的創(chuàng)作習(xí)慣。因此，它僅適用于元素，因?yàn)闃?biāo)記沒(méi)有元素的代碼在語(yǔ)義上是無(wú)效的。?根據(jù)HTML5規(guī)范，定義代碼語(yǔ)言的推薦方法是類，這是Prism使用的類。另外，Prism還支持較短的版本：。<code><code>language-xxxxlang-xxxx
為了使事情變得更容易，Prism假定此語(yǔ)言定義是繼承的。因此，如果多個(gè)元素具有相同的語(yǔ)言，則可以將類添加到它們的共同祖先之一上。這樣，還可以通過(guò)在或元素上添加一個(gè)類來(lái)定義文檔范圍的默認(rèn)語(yǔ)言。<code>language-xxxxlanguage-xxxx<body><html>
如果要選擇不突出顯示是使用已聲明代碼語(yǔ)言的元素的后代的元素的突出顯示，則可以向其添加類（或?qū)嶋H上是任何不存在的語(yǔ)言）。<code>language-none
的來(lái)標(biāo)記碼塊推薦的方法?（無(wú)論是語(yǔ)義和棱鏡）是與元件元件內(nèi)部，像這樣：<pre><code>
<pre><code class="language-css">p { color: red }</code></pre>如果您使用該模式，則會(huì)自動(dòng)獲取該類（如果尚不具備該類），并將其樣式化為代碼塊。<pre>language-xxxx
如果你想阻止自動(dòng)突出顯示的任何元素，而使用的API，可以設(shè)置到了之前觸發(fā)事件。通過(guò)在包含Prism核心的元素上設(shè)置屬性，此操作將自動(dòng)完成。例：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結(jié)合使用時(shí)，我們建議使用Autoloader插件，該插件會(huì)在必要時(shí)自動(dòng)加載語(yǔ)言。
自動(dòng)裝帶器的設(shè)置如下所示。當(dāng)然，您也可以自己定義主題。
<!DOCTYPE html> <html> <head> ...<link 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與捆綁器一起使用，請(qǐng)使用npm以下命令安裝Prism?：
$ npm install prismjs然后，您可以import進(jìn)入捆綁包：
import Prism from 'prismjs';為了僅使用所需的語(yǔ)言和插件輕松配置Prism實(shí)例，請(qǐng)使用babel插件?babel-plugin-prismjs。這將允許您加載最少數(shù)量的語(yǔ)言和插件，以滿足您的需求。有關(guān)配置詳細(xì)信息，請(qǐng)參見該插件的文檔。
節(jié)點(diǎn)使用
如果要在服務(wù)器上或通過(guò)命令行使用Prism，Prism也可以與Node.js一起使用。如果您嘗試針對(duì)不支持瀏覽器端JS的環(huán)境（例如AMP pages）生成帶有突出顯示代碼的靜態(tài)HTML頁(yè)面，則可能會(huì)很有用。
例：
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將加載默認(rèn)的語(yǔ)言：markup，css，?clike和javascript。您可以使用該實(shí)用程序加載更多語(yǔ)言，該?實(shí)用程序?qū)⒆詣?dòng)處理任何必需的依賴項(xiàng)。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或其他打捆，因?yàn)檫@將導(dǎo)致的WebPack包括所有的語(yǔ)言和插件。使用上述的babel插件。loadLanguages()