如何使用

我們只需要在頁面上引入 prism.css 和 prism.js 文件：

...

...

根據(jù)HTML5規(guī)范，代碼標(biāo)記需要使用元素，使用Prism時(shí)，可以給code元素添加language-xxx類。如果多個(gè)元素具有相同的語言，則可以在其共同的父元素 上添加language-xxx類。這樣，您還可以通過在或元素上添加language-xxx類來定義文檔范圍的默認(rèn)語言。

Prism推薦使用內(nèi)部語義化的pre 元素和 code 元素來標(biāo)記代碼區(qū)塊，如下所示：

p { color: red }

如果你的代碼塊是其他語言，你可以把language-xxx類中的xxx改成設(shè)定的語言，如：html，javascript，php等。

Prism.js支持很多種語言和插件主題。把一些不必要支持的語言包下載下來，會加大庫文件大小，拖累我們網(wǎng)站加載速度。所以Prism.js采用自定義下載。在下載頁面定，勾選你所需要高亮的語言、主題和插件，然后點(diǎn)擊下載即可。下載地址：http://prismjs.com/download.html

你可以使用插件來給代碼添加行號，只需要在pre標(biāo)簽中加上line-numbers類即可。在之前的js代碼中添加一行。

當(dāng)然，我們也可以使用NPM來安裝Prismjs：

$ npm install prismjs

這樣使用：

var Prism = require('prismjs');

// The code snippet you want to highlight, as a string

var code = "var data = 1;";

// Returns a highlighted HTML string

var html = Prism.highlight(code, Prism.languages.javascript);

Prism.js主要功能列表

極致易用，引用 prism.css 和 prism.js，使用合適的 HTML5 標(biāo)簽(code.language-xxxx)，搞定！

壓縮后只有2KB的大小(核心)。每種語言定義增加了大約300-500字節(jié)。

語言的 CSS 類是可繼承的，所以你只需定義一次就能應(yīng)用到多個(gè)代碼片段。

如果可能，支持通過 Web Workers 實(shí)現(xiàn)并行。

由于Prism的插件架構(gòu)，非常容易擴(kuò)展而無需修改代碼。

突出顯示特定的行和/或行范圍(需要插件)

顯示不可見的字符，如制表符，換行符等(需要插件)

自動鏈接URL和電子郵件，在評論中使用Markdown鏈接(需要插件)

總結(jié)

以上是生活随笔為你收集整理的php prism,漂亮的代码语法高亮库：Prism.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。