5+最佳代码语法高亮javascript插件

本文概述

• 5. SHJS
• 4. SyntaxHighlighter
• 3. Rainbow
• Rainbow.color
• 2. Highlight.js
• 1. Prism.js
• Microlight.js

对于喜欢编码的人很有用, 你可能需要一个类似这样的插件来突出显示你的网站或博客上的任何代码示例。以下语法突出显示插件集合仅包含提供最佳功能, 易于初始化和可使用的插件。它们都不要求jQuery起作用, 因为它们是独立的, 并且仅使用VanillaJS。

5. SHJS

SHJS是一个JavaScript脚本, 用于突出显示HTML文档中的源代码段落。使用SHJS的文档在Web浏览器的客户端突出显示。 SHJS使用GNU Source-highlight中的语言定义。这使SHJS能够突出显示以许多不同语言编写的源代码。 SHJS应该可以在符合HTML 4, ECMA-262和DOM Level 2标准的任何浏览器中运行(我知道, 虽然太旧了, 但为太旧的浏览器提供了一个后备功能, 可以派上用场)。

要使用SHJS, 你至少需要3个文件：

• 主脚本或缩小版本
• 语言定义文件
• 样式表

该插件是老派的, 因此你需要使用你要突出显示的语言定义来加载.js文件。但是, 你可以将它们全部包装在一个文件中。

4.语法高亮

SyntaxHighlighter是使用JavaScript开发的功能齐全的自包含开放源代码客户端客户端语法突出显示工具。

要使SyntaxHighlighter在你的页面上工作, 你需要执行以下操作：

• 按照构建说明组装你自己的语法highlighter.js
• 使用<script src =” syntaxhighlighter.js” />标记将其放在页面上, 或遵循CommonJS的使用说明

要初始化javascript代码, 你可以使用：

<script type="text/javascript" src="syntaxhighlighter.js"></script>

<pre class="brush: js">
function foo()
{
}
</pre>

不幸的是, SyntaxHighlighter不支持任何标准, 因此你的标记将由该插件突出显示, 并且不太容易维护。

3. Rainbow

Rainbow是用Java编写的代码语法突出显示库。它被设计为轻量级(1.4kb), 易于使用且可扩展。它可以通过CSS完全实现。Rainbow本身很简单。它遍历代码块, 处理正则表达式模式, 并将匹配的模式包装在<span>标记中。所有主题都由CSS决定。

在标记中, data-language属性用于指定要突出显示的语言：

<pre><code data-language="javascript">var testing = true;</code></pre>

Rainbow.color

使用Rainbow.color方法突出显示代码：

Rainbow.color();

2. Highlight.js

Highlight是一个超级DOM代码高亮。它尝试自动检测语言。如果自动检测对你不起作用, 则可以在class属性中指定语言：

• 152种语言和72种样式
• 自动语言检测
• 多语言代码突出显示
• 可用于node.js
• 适用于任何标记
• 与任何js框架兼容

要在项目中使用highlight.js, 只需包含css(1)和js(1)文件并使用initHighlightingOnLoad()方法进行初始化：

<!-- Include library -->
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<!-- Initialize highlight -->
<script>hljs.initHighlightingOnLoad();</script>

所需的标记应如下所示：

<pre><code class="html">Some escaped code to highlight here</code></pre>

1. Prism.js

Prism是一种轻量级的, 可扩展的语法突出显示工具, 其构建考虑了现代Web标准。它已在数千个网站中使用, 包括你每天访问的一些网站。

所有样式都是通过CSS完成的, 并使用了明智的类名, 例如.comment, .string, .property等。你可以选择七个可用主题之一。 Prism不支持IE 6-8。

• 压缩后压缩大小只有2KB(核心)。每种语言定义大约增加300-500字节。
• 鼓励良好的作者做法。其他突出显示符号鼓励甚至强迫你使用语义上错误的元素, 例如<pre>(单独)或<script>。 Prism会强制你使用正确的元素来标记代码：<code>。单独用于内联代码, 或在<pre>内部用于代码块。另外, 通过HTML5草案中推荐的方式定义语言：通过language-xxxx类。
• 语言定义是继承的。这意味着, 如果多个代码段具有相同的语言, 则可以在它们的共同祖先之一中对其进行一次定义。
• 你可以使用行高亮或行号之类的插件(全部可选)。
• 反应灵敏

要进行安装, 只需包含棱镜.css(选择所需的主题)文件, 然后选择你需要在插件主页上突出显示的语言(或全选)并将它们包括在文档中。

根据HTML5规范, 定义代码语言的推荐方式是language-xxxx类, 这是Prism使用的类。为了使事情变得更容易, 如果代码元素已经具有使用指定语言的类, 则高亮将自动触发, 即：

<!-- Highligh in C# mode -->
<pre><code class="lang-csharp">Some code</code></pre>

<!-- This block will be not highlighted -->
<pre><code>Some code</code></pre>

我们的代码世界使用棱镜突出显示代码示例

Microlight.js

Microlight.js

Github |演示版

microlight.js是一个开源微库, 它通过突出显示任何编程语言而无需附加其他语言包或样式来提高代码段的可读性。

与其他代码突出显示解决方案不同, microlight.js不会为许多语言保留一组规则。相反, 它使用通用的突出显示策略为大多数编程语言提供合理的突出显示。结果：

• 库的大小非常紧凑, 仅为2.2k。
• 你无需指定该语言, 也无需为此打扰用户。

实际上, microlight.js并不关心代码是用什么语言编写的, 也不关心代码的结构。它只是遍历代码并突出显示它。

启蒙者JS

EnlighterJS是为MooTools开发的免费, 易于使用的语法高亮插件。使用它就像在网站上添加单个脚本和样式, 选择要突出显示的元素一样简单, EnlighterJS负责其余的工作。只需添加data-enlighter-language属性即可指定编程语言：

<pre data-enlighter-language="js">
Element.implement({
...some js code to highlight..
});
</pre>

EnlighterJS需要MooTools.Core> = 1.4.5。

Google Prettyprint

Google Prettyprint是一个可嵌入的脚本, 可以使HTML中的源代码片段更漂亮。

• 适用于HTML页面。
• 即使代码包含嵌入式链接, 行号等也可以使用。
• 简单的API：包括一些JS和CSS并添加onload处理程序。
• 轻量级：下载量小, 运行时不会阻止页面加载。
• 通过CSS自定义样式。请参阅主题库。
• 支持所有类似C, 类似Bash和类似XML的语言。无需指定语言。
• 其他语言的可扩展语言处理程序。你可以指定语言。

将代码段放在<pre class =” prettyprint”> … </ pre>或<code class =” prettyprint”> … </ code>中, 它将自动打印精美：

<pre class="prettyprint">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>

如果你知道另一个很棒的语法高亮插件, 请在评论框中与我们分享。玩得开心