当你想给你的网站或者编辑器选用一款代码高亮插件时，你会发现有太多的可选项了，选择使用哪一个将是一个艰巨的任务。

今天我们按JavaScript插件、WordPress插件、Sublime Text扩展包以及Brackets and Atom分类，把它们这个领域比较突出的分享给大家，方便大家的选择。

JavaScript代码高亮插件

选择JavaScript代码高亮插件的一个主要因素是你要使用的语言的颜色和样式。为了方便演示，我们为下面将要介绍的插件都创建了一个在线演示。每个插件都提供了三种主题展示，你可以在GitHub上查看所有的演示代码。

我们收集的这些代码高亮插件都支持非常多的语言。但是这里只给大家演示WEB开发常用的一些语言：

• HTML
• JavaScript
• CSS
• PHP
• Markdown
• CoffeeScript
• Handlebars
• Jade
• LESS
• Sass
• Stylus

所有的演示都列出了上面每种语言的高亮效果，即使插件没有相应的语言支持。如果插件不支持该语言，它可能会被显示成相近的语言或者直接显示为纯文本。

并且每个例子都配有一个一目了然的截图、一个简单的代码部署方式、关键点的总结、额外的相关信息以及其支持的语言的链接、网站、GitHub库。

1. SyntaxHighlighter

SyntaxHighlighter自2004年就出现了，并且是非常值得信任的。它支持23种语言，远比WEB开发涉及的语言要多，所以它很适合程序相关的网站。提供七种可选主题。

SyntaxHighlighter Demo – Default Theme(html)

SyntaxHighlighter Demo – Rdark Theme(html)

部署方法

1. 引入JavaScript核心库文件，然后引入你要高亮的语言相应的JavaScript文件；
2. 加载CSS核心文件，然后加载你要使用的主题的CSS文件；
3. 在页面底部运行JavaScript方法：SyntaxHighlighter.all()
4. 在 pre 标签中添加代码，用类名指定语言：

<pre class="brush: js">
// code here
</pre>

相关链接

1. 在线演示
2. 支持语言列表
3. 官网
4. GihHub

2. Prism

Prism 的一个很大的优势是它允许用户自定制，只下载你需要的内容。它对于演示中的WEB设计语音都有很好的支持，同时还支持很多其他语言。它是WEB设计类网站一个有力的竞争者，同时由于它对其他语言的支持，它也适用于其他类型的编码网站。有六种不同的主题。

Prism Demo – Default Theme (html)

Prism Demo – Okaidia Theme (html)

定制下载系统

Prism 支持61种语言，包含我们例子中所有的语言。当你下载 Prism 的时候，你不需要下载所有的，你可以只选择你需要的那些。你也可以选择要使用的主题，之后就会生成你需要的JavaScript和CSS文件。

部署方法

1. 加载你自定制的JavaScript和CSS文件；
2. 代码用 pre 标签包裹，并放在 code 标签中，使用 code 标签的类指定语言：

<pre>
<code class="language-javascript">
// code here
</code>
</pre>

相关链接

• 在线演示
• 支持语音列表
• 官网
• GitHub

3. Highlight.js

Highlight.js支持大量的语言和主题，可以自定制下载你需要的语言，另一个强大的功能是它可以自动检测语言。这样强大的语言和主题支持使得它几乎适用于任何案例。

Highlight.js – Default Style (js)

Highlight.js – Railscasts Style (js)

Highlight.js提供了大概54个主题风格，其中一些匹配流行的IDE风格，如：Monokai 和 Railscasts。你只需要复制你需要的主题CSS文件即可。

支持的语言也非常的多，我大概数到118个，我们示例中的语言都支持。

你只需选择你需要的语言，它会自动把你需要的文件打包成一个文件。

部署方法

1. 引入JavaScript和CSS文件；
2. 在页面底部运行JavaScript方法：hljs.initHighlightingOnLoad();
3. 使用 pre 标签和 code 标签包裹代码，它可以自动检测语言，你也可以通过 code 的类来指定语言。

<pre>
<code>
// code here
</code>
</pre>
 
OR...
 
<pre>
<code class="language-javascript">
// code here
</code>
</pre>

相关链接：

• 在线演示
• 支持语言列表
• 官网
• GitHub

4. Rainbow

Rainbow 是一个小型的可扩展和主题化的代码高亮插件，所以非常适合那些希望做自定制功能的人。它使用 data-language 而不是 class 来指定语言。有14种主题，其中一些匹配主流的IDE，如：Monokai, Solarized and Tomorrow Night。

Rainbow Demo – GitHub Theme (css)

Rainbow Demo – Twilight Theme (css)

部署方法

1. 加载JavaScript和CSS文件；
2. 引入你希望高亮的语言的JavaScript文件；
3. 使用 pre 标签和 code 标签包裹代码，通过 code 的 data-language 指定语言：

<pre>
<code data-language="javascript">
// code here
</code>
</pre>

相关链接

• 在线演示
• 支持语音列表
• 官网
• GitHub

5. SHJS

SHJS 同 SyntaxHighlighter 一样，更加偏向于编程语言而非WEB设计语言，支持39种语言，提供39种主题风格。

SHJS Demo – Default Theme (html)

SHJS Demo – Navy Theme (html)

部署方法

1. 加载JavaScript文件和你选择的CSS主题文件；
2. 加载你高亮的语言对应的JavaScript文件；
3. 使用 onload() 方法运行 sh_highlightDocument(); ，或者使用 jQuery 检测页面是否加载完成；
4. 使用 pre 标签包裹代码，并使用 class 指定语言：

<pre class="sh_javascript">
// code here
</pre>

相关链接

• 在线演示
• 支持语言 && 官网

6. Google Code Prettify

Code Prettify 支持29种语言，也是更加偏向于编程语言。单一的URL自动加载机制使得你可以不用下载任何的JavaScript和CSS文件。不需要指定语言，只需给 pre 标签指定一个 prettyprint 属性即可。

Google Code Prettify Demo – Default Theme (md)

Google Code Prettify Demo – Sunburst Theme (md)

部署方法

1. 通过 script 标签加载URL https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js，它会自动加载代码高亮和默认主题；
2. 如果你想指定一个主题，可以在URL后面加上这样的代码：run_prettify.js?skin=sunburst ；
3. 它可以自动检测语言，你只需把代码包裹在一个有 prettyprint 属性的 pre 标签内：

<pre class="prettyprint">
// code here
</pre>

相关链接

• 在线演示
• 支持语言列表
• GitHub

 

WordPress插件

请注意，WP库中有很多的相当流行的代码高亮插件，但这篇文件并不介绍它们。因为近期的一个WP问题需要很多插件进行更新以确保安全。在写这篇文章时，下面列出的这些插件都是与最新版本WP兼容的。

7. SyntaxHighlighter Evolved

SyntaxHighlighter Evolved 是上面介绍的 SyntaxHighlighter 的变形。通过短代码的形式来高亮代码：

[code language="html"]
<header>
<h1>Example HTML</h1>
</header>
<main class="style">
<p>Some text</p>
</main>
[/code]

使用技巧

在写一篇博客的时候，确定你是用的是否是“可视化”编辑模型，粘贴代码的时候要确保你使用“可视化”编辑模型而非“文本”模式。使用“可视化”模式可以把HTML标签转化为实体代码，如：< 和 > 会被转化为 < 和 >。

相关链接

• 网站
• WP库
• GitHub

8. Crayon Syntax Highlighter

Crayon Syntax Highlight 是一个PHP驱动的解决方案，虽然它主要是为WordPress插件设计的，但是它自称适用于任何基于PHP的平台。

Crayon非常好用，因为它在工具栏增加了一个按钮，点击后有弹出框，里面有放代码的区域，有下拉列表选择语言，还有其他一些选项。

 

其中一个选项让你可以给每个代码块设置一个不同的主题，也就是说一个页面中可以使用多个主题。

Crayon Syntax Highlighter – Classic Theme (js)

Crayon Syntax Highlighter – Epic Geeks Theme (js)

目前支持63种语言，包括很多常用的WEB开发语言。想看完整的语言列表，你需要安装次WordPress插件。

相关链接

• WP库
• GitHub

9. Prism Syntax Highlighter for WordPress

Prism Syntax Highlighter for WordPress 是我们前面提到的 Prism JavaScript代码高亮插件的应用。这个插件既不用短代码，也没有弹出代码窗口，而是对于每一个代码块，你增加一个自定义字段，例如 js_code_example ，然后把你的代码贴进去，这样做的目的是确保你的代码不收编辑器的影响。要显示代码，你只需要在你想显示的地方调用下面的短代码即可。

[prism field=js_code_example language=javascript]

相关链接

• 官网
• WP库
• GitHub

 

下一篇分享《IDE编辑器相关的代码高亮插件》。

via: tutsplus，本文由 Specs 翻译整理，发布在 WEB资源网，转载请注明来源。