SyntaxHighlighter是一个非常不错的代码高亮工具,支持各种平台,只需要前台载入代码即可。这里顺便放出一个比较漂亮的美化版。
版本比较旧,2.0.320版本的,但个人认为好用就够了。这版本是单个JS文件支持大部分语言的,不像官方版本要单个语言单个JS调用的,方不方便就见仁见智了。
1.下载必要文件
所有必需的文件我已经打包好了,点此下载
然后,如果你懂CSS,可以修改包内shThemesDefault.css
,改成自己喜欢的样式。默认样式的示例如下:(美化样式代码来自M4)
在shThemeDefault.css第一行
.syntaxhighlighter {margin: 0 0 14px 0;background-color: #F7F7F7 !important;}
中追加一个
.syntaxhighlighter {margin: 0 0 14px 0;background-color: #F7F7F7 !important;word-wrap: break-word;}
可阻止代码溢出
2.上传
在主机主目录新建一个名为code的文件夹(别的路径也没问题,注意代码修改下),然后把压缩包里所有文件放到code目录里。
3.调用
复制下面的代码到主题的footer.php(header也没关系,只要能载入就行)
<script type="text/javascript" src="http://ben-lab.com/code/shCore-min.js"></script> <script type="text/javascript" src="http://ben-lab.com/code/shBrushAll-min.js"></script> <link type="text/css" rel="stylesheet" href="http://ben-lab.com/code/shThemeDefault.css" /> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'http://ben-lab.com/code/clipboard.swf'; SyntaxHighlighter.config.toolbarItemWidth = 16; SyntaxHighlighter.config.toolbarItemHeight = 16; SyntaxHighlighter.all(); </script>
(把上面ben-lab.com改成自己的域名)
那么,现在要怎么发代码呢,
按照这样的格式贴代码,就能在前台看到效果了
<pre class="brush:php;"></pre>
4.设置
有两种方法,一种是直接调整所有代码高亮块,另一种是单个调整。这里先给出所有配置项的列表及内容:
SyntaxHighlighter.config 全局配置,不支持单个代码块的调整
名称 | 默认值 | 介绍 |
bloggerMode | false | 如果博客在blogger托管,就必须把这个设为true |
strings | Object | 官方介绍说“允许您更改默认的消息,在这里看到更多细节” |
stripBrs | false | 设为true可以自动去掉代码里的<br/>标签 |
tagName | “pre” | 更改自动识别的标签,如果改成p就会识别段落里的代码 |
在刚才放footer的代码下面接着,像这样设置:
SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all();
上面演示了启用blogger模式,自己一条条添加规则就行了
SyntaxHighlighter.defaults 单个调节
名称 | 默认值 | 介绍 |
auto-links | true | 自动给代码里的网址加链接(默认已打开) |
class-name | ‘ ‘ | 定义CSS,详细看DEMO |
collapse | false | 设为true自动收缩代码块,点击才打开 |
first-line | 1 | 设定第一行的的行号,如果设为10即行号从10开始 |
gutter | true | 打开或关闭行号显示 |
highlight | null | 例子:设定[2,3],可以高亮2和3行。设定4,单独高亮第4行 |
html-script | false | 这个可以让代码块里面的HTML代码不执行,前提是要特别下载一个shBrushXml.js并载入。请自行到官网找。 |
smart-tabs | true | 谁可以告诉我这货用来作甚! |
tab-size | 4 | 更改空格的宽度 |
toolbar | true | 开关工具栏,就是右上角那个 |
1.全局调整:方法同上
SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.defaults['smart-tabs'] = false; <!-- 一条条添加 --> SyntaxHighlighter.all();
2.单个调整:把刚才的<pre></pre>
改改
<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>
看起来,博主目前用的代码高亮就是 用的这个东东么?