Syntaxy.js-小巧灵活的网页语法高亮js插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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	一个用逗号分隔的行号列表，这些行会闪烁/高亮。