2014年主流JavaScript代码高亮插件盘点与选型指南

JavaScript代码高亮插件概述

撰写技术博客的开发者通常对代码高亮组件并不陌生。一款优质的JavaScript代码高亮插件能够渲染各类编程语言，实现关键字着色及代码缩进等功能。本文旨在分享几款高性能的JavaScript代码高亮插件，协助开发者在网页中高效实现代码编辑与展示效果。

主流代码高亮插件详解

1、SyntaxHighlighter – 优秀的JavaScript代码高亮插件

SyntaxHighlighter是一款纯JavaScript编写的代码高亮插件，支持对多种编程语言进行着色渲染，且性能表现良好。该插件允许自定义主题文件，用户只需在初始化时指定所需主题即可应用。

官方网站：http://alexgorbatchev.com/SyntaxHighlighter/

2、Google Code Prettify – 开源的JavaScript代码高亮插件

Google Code Prettify由Google推出，支持C/C++、Java、Python、Ruby、PHP、VisualBasic、AWK、Bash、SQL、HTML、XML、CSS、JavaScript、Makefiles及部分Perl语言的代码高亮着色。

官方网站：http://code.google.com/p/google-code-prettify/

3、Highlight.js – 多风格JavaScript代码高亮插件

Highlight.js是一个旨在任何Web页面中高亮显示各种示例源代码语法的JavaScript项目，具备以下特性：

• 支持92种编程语言及49种代码格式化风格。
• 具备自动检测语言种类的功能。
• 支持多语言混合代码的高亮显示。
• 支持Node.js环境。
• 支持使用任意HTML标记。
• 兼容任意js框架

  

  官方网站：https://highlightjs.org/

  4、Prism.JS - 轻量级JavaScript代码高亮插件

  Prism.JS是目前最为轻量的JavaScript代码高亮插件，压缩后体积仅2KB。它支持大多数流行编程语言及多种主题样式，开发者仅需引用CSS和JS文件即可完成配置。

  

  官方网站：http://prismjs.com/

  5、jQuery.Syntax – 基于jQuery的轻量级代码高亮插件

  该插件基于jQuery开发，属于轻量级方案，渲染速度极快。此外，jQuery.Syntax还提供WordPress插件应用，对于使用WordPress的个人博主而言，可实现零代码投入的高亮功能。

  

  官方网站：http://www.codeotaku.com/projects/jquery-syntax/index.en

  6、DlHighlight – 简单高效的jQuery代码高亮插件

  DlHighlight是基于JavaScript的代码高亮插件，结构简单，目前仅支持JavaScript、CSS、XML及HTML语言。

  

  官方网站：http://mihai.bazon.net/projects/javascript-syntax-highlighting-engine

  7、Rainbow.js – 可扩展的JavaScript代码高亮插件

  Rainbow是由JavaScript开发的语法高亮工具，设计目标是轻量级（压缩后仅1.4KB），使用简便且具备可扩展性。其语法高亮主题完全通过CSS定义，底层基于正则表达式实现。

  

  官方网站：http://craig.is/making/rainbows

  上述JavaScript代码高亮插件均为常用工具，若您有更优秀的推荐，欢迎告知。

插件选型建议

总结：

最适合自身的方案才是最佳选择，因此本文的排序不代表推荐优先级，建议用户根据具体项目需求进行选择。