對(duì)于喜歡寫技術(shù)博客的同學(xué)來(lái)說(shuō)，一定對(duì)代碼高亮組件非常熟悉。一款優(yōu)秀的JavaScript代碼高亮插件，將會(huì)幫助你渲染任何一種編程語(yǔ)言，包括一些關(guān)鍵字的著色，以及每行代碼的縮進(jìn)等。今天我們要來(lái)分享一些高性能的JavaScript代碼高亮插件，這些JavaScript代碼高亮插件將非常有效地幫你實(shí)現(xiàn)在網(wǎng)頁(yè)上的代碼編輯和展示。

　1、SyntaxHighlighter – 最優(yōu)秀的JavaScript代碼高亮插件

SyntaxHighlighter 是一款完全基于JavaScript的代碼高亮插件，SyntaxHighlighter 可以對(duì)大部分編程語(yǔ)言進(jìn)行著色渲染，而且代碼高亮的性能也非常不錯(cuò)。SyntaxHighlighter 可以自定義主題文件，在初始化的時(shí)候指定自己喜歡的主題即可。

官方網(wǎng)站：http://alexgorbatchev.com/SyntaxHighlighter/

　2、Google Code Prettify – 自由地JavaScript代碼高亮插件

Google Code Prettify是一款由Google推出的JavaScript代碼高亮插件，Google Code Prettify可以對(duì)C/C++, Java, Python, Ruby, PHP, VisualBasic, AWK, Bash, SQL, HTML, XML, CSS, JavaScript, Makefiles和部分Perl編程語(yǔ)言代碼高亮著色。

官方網(wǎng)站：http://code.google.com/p/google-code-prettify/

　3、Highlight.js – 多風(fēng)格JavaScript代碼高亮插件

highlight.js是一個(gè)用于在任何web頁(yè)面上高亮著色顯示各種示例源代碼語(yǔ)法的JavaScript項(xiàng)目。具有以下特色：

支持 92 種語(yǔ)言，49 種代碼格式化風(fēng)格。自動(dòng)檢測(cè)語(yǔ)言種類支持多語(yǔ)言混合的代碼高亮支持Node.js支持使用任何HTML標(biāo)記兼容任意js框架

官方網(wǎng)站：https://highlightjs.org/

　4、Prism.JS - 輕量級(jí)JavaScript代碼高亮插件

Prism.JS是目前最為輕量級(jí)的JavaScript代碼高亮插件，他壓縮后只有2KB的大小，Prism.JS也支持大部分流行的編程語(yǔ)言，并且支持多種主題樣式，開(kāi)發(fā)者只需要引用CSS文件和JS文件即可完成。

官方網(wǎng)站：http://prismjs.com/

　5、jQuery.Syntax – jQuery輕量級(jí)代碼高亮插件

這款代碼高亮插件是基于jQuery的，同樣也是輕量級(jí)的，渲染速度非常快。同時(shí)jQuery.Syntax還具有wordpress的插件應(yīng)用，對(duì)于個(gè)人博主來(lái)說(shuō)，使用wordpress和jQuery.Syntax可以完美實(shí)現(xiàn)0代買的高亮功能。

官方網(wǎng)站：http://www.codeotaku.com/projects/jquery-syntax/index.en

　6、DlHighlight – jQuery簡(jiǎn)單高效代碼高亮插件

DlHighlight是基于JavaScript的代碼高亮插件，非常簡(jiǎn)單，目前只支持JavaScript, CSS, XML, HTML。

官方網(wǎng)站：http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine

　7、Rainbow.js – 可擴(kuò)展的JavaScript代碼高亮插件

Rainbow 是JavaScript開(kāi)發(fā)的語(yǔ)法高亮工具。被設(shè)計(jì)為輕量級(jí)（壓縮后僅1.4 kb），使用簡(jiǎn)單，可擴(kuò)展。語(yǔ)法高亮主題完全通過(guò)CSS定義。基于正則表達(dá)式實(shí)現(xiàn)。

官方網(wǎng)站：http://craig.is/making/rainbows

這幾個(gè)JavaScript代碼高亮插件都是比較常用的，如果你有更優(yōu)秀的代碼高亮插件，歡迎告訴我們。

via:codeceo