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