Syntaxy.js是一款小巧灵活的网页语法高亮js插件。Syntaxy.js支持各种主流的编程语言，提供3种主题样式。它默认是JS插件，但是也可以作为jQuery插件来使用。

使用方法

使用该语法高亮插件需要在页面中引入syntaxy.theme.min.css文件和syntaxy.min.js文件。

<link rel="stylesheet" href="syntaxy.theme.min.css" />
<script type="text/javascript" src="js/syntaxy.min.js"></script>
HTML结构

使用<pre>标签来格式化代码片段。

<pre id="codebox" data-type="default">
    // 这里放置需要格式化的代码片段
    // default 是格式化语法高亮过滤器的名称
</pre>
初始化插件

通过纯JS来初始化Syntaxy插件：

<script type="text/javascript">
  var options = {};
  var codebox = document.getElementById( 'codebox' );
  var syntaxy = new Syntaxy( codebox, options );
  // add custom filters, modify options, etc. then...
  syntaxy.render();
</script>

通过jQuery来初始化Syntaxy插件：

<script type="text/javascript">
  var options = {};
  $( '#codebox' ).syntaxy( options );
</script>

配置参数

有多种方法可以为Syntaxy插件设置配置参数：第一种方法是在初始化时以对象的方式传入Syntaxy构造函数中。第二种方法是使用setOptions( options );方法。第三种方法是使用data属性来进行参数传递。

参数 data属性 类型 默认值 描述
tagOpen n/a String << 指定包裹要渲染的HTML标记的开始标签。
tagSplit n/a String ≈ 指定包裹要渲染的HTML标记的分隔标签。
tagClose n/a String >> 指定包裹要渲染的HTML标记的闭合标签。
tagName n/a String span 在渲染时用于包裹高亮单词的HTML标签。
classPrefix n/a String stx- 相关主题的class前缀。
codeTitle data-title String Source code 工具栏上显示的标题。
codeType data-type String blank 指定用于高亮指定类型的语言的正则表达式过滤器。
minHeight data-min-height String 100px 语法高亮容器的最小高度。
maxHeight data-max-height String 600px 语法高亮容器的最大高度。
isInline data-inline Mixed false 指定代码容器是内联元素还是块级元素。
wordWrap data-wrap Mixed false 指定当代码很长时是断行显示还是一行显示（出现水平滚动条）。
startLine data-start Int 1 代码第一行显示的行号
debugLines data-debug String blank 一个用逗号分隔的行号列表，这些行会闪烁/高亮。

Syntaxy.js语法高亮插件的github主页地址为：https://github.com/rainner/syntaxy-js