php prism,漂亮的代码语法高亮库:Prism.js
如何使用
我們只需要在頁面上引入 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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: matlab访问数组的元素,使用分类数组
- 下一篇: 乾隆通宝一枚多少钱