本文概述
- 5. SHJS
- 4. SyntaxHighlighter
- 3. Rainbow
- Rainbow.color
- 2. Highlight.js
- 1. Prism.js
- Microlight.js
5. SHJS SHJS是一个JavaScript脚本, 用于突出显示HTML文档中的源代码段落。使用SHJS的文档在Web浏览器的客户端突出显示。 SHJS使用GNU Source-highlight中的语言定义。这使SHJS能够突出显示以许多不同语言编写的源代码。 SHJS应该可以在符合HTML 4, ECMA-262和DOM Level 2标准的任何浏览器中运行(我知道, 虽然太旧了, 但为太旧的浏览器提供了一个后备功能, 可以派上用场)。
要使用SHJS, 你至少需要3个文件:
- 主脚本或缩小版本
- 语言定义文件
- 样式表
文章图片
4.语法高亮 SyntaxHighlighter是使用JavaScript开发的功能齐全的自包含开放源代码客户端客户端语法突出显示工具。
要使SyntaxHighlighter在你的页面上工作, 你需要执行以下操作:
- 按照构建说明组装你自己的语法highlighter.js
- 使用< script src =http://www.srcmini.com/” syntaxhighlighter.js” /> 标记将其放在页面上, 或遵循CommonJS的使用说明
文章图片
要初始化javascript代码, 你可以使用:
<
script type="text/javascript" src="http://www.srcmini.com/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框架兼容
<
!-- Include library -->
<
link rel="stylesheet" href="http://www.srcmini.com/path/to/styles/default.css">
<
script src="http://www.srcmini.com/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类。
- 语言定义是继承的。这意味着, 如果多个代码段具有相同的语言, 则可以在它们的共同祖先之一中对其进行一次定义。
- 你可以使用行高亮或行号之类的插件(全部可选)。
- 反应灵敏
根据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 |演示版
【5+最佳代码语法高亮javascript插件】microlight.js是一个开源微库, 它通过突出显示任何编程语言而无需附加其他语言包或样式来提高代码段的可读性。
与其他代码突出显示解决方案不同, microlight.js不会为许多语言保留一组规则。相反, 它使用通用的突出显示策略为大多数编程语言提供合理的突出显示。结果:
- 库的大小非常紧凑, 仅为2.2k。
- 你无需指定该语言, 也无需为此打扰用户。
文章图片
启蒙者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">
class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded <
a href="http://www.srcmini.com/#voila2">
tags<
/a>
.
}<
/pre>
文章图片
如果你知道另一个很棒的语法高亮插件, 请在评论框中与我们分享。玩得开心
推荐阅读
- 5个最佳Cookie政策横幅javascript插件
- 5个人脸跟踪和识别相关的最佳javascript库
- 5+最佳免费图表JavaScript库
- 7个最佳语音命令和语音识别相关的javascript库
- 7+最佳自定义浏览器滚动条JavaScript和jQuery插件
- 在AndroidGameActivity中运行LoadContent时启动/加载屏幕
- 启动Android模拟器时,“设备上没有足够的存储空间来存储包”
- 用户'IIS APPPOOLASP.NET v4.0'登录失败
- 如果我在RabbitTemplate上直接设置它们,为什么Spring需要在Converter和ClassMapper上使用@Bean()