幽谷奇峰 | 燕雀鸣幽谷，鸿鹄掠奇峰

在 VimWiki 中使用 SyntaxHighlighter 实现代码语法高亮

下载最新的 SyntaxHighlighter 3.0.83

将压缩包里的 scripts 和 styles 文件夹解压到 VimWiki 的 html 文件输出目录下。我将它们都放在syntaxhighlighter目录下。

SyntaxHighlighter 基本用法

载入核心JS脚本和样式文件

在模板文件的 <head></head> 标签之间加入以下代码：

1
2
3
<script type="text/javascript" src="%root_path%syntaxhighlighter/scripts/shCore.js"></script>
<link type="text/css" rel="Stylesheet" href="%root_path%syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="%root_path%syntaxhighlighter/styles/shThemeRDark.css"/>

这段代码的作用是，分别载入核心JS脚本、核心样式文件和主题样式文件。其中，shCore.css 可以用其他的 core 系列的样式文件，例如shCoreDefault.css来代替。同样的，shThemeRDark.css 也可以用其他的 Theme 系列样式文件代替，例如shThemeEclipse.css。

注意：js和css文件的路径一定要设置正确。

载入对应代码的brush脚本

如果页面要高亮的代码有Python代码和Javascript代码，那么就再在 <head></head> 标签之间加入以下代码：

1
2
<script type="text/javascript" src="%root_path%syntaxhighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="%root_path%syntaxhighlighter/scripts/shBrushJScript.js"></script>

调用 SyntaxHighlighter.all() 方法

在 </body> 标签前加入以下代码：

1
2
3
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

使用 SyntaxHighlighter 3.0.83 的 AutoLoader 特性

SyntaxHighlighter 3.0.83 引入了shAutoLoader.js，可以实现根据页面的内容自动选择加载所需要的 brush 脚本。 使用方法就是在 </body> 标签前加入以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script src="%root_path%syntaxhighlighter/scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">var root_path='%root_path%';</script>
<script type="text/javascript">
function path()
{
    var scripts_path=root_path+'syntaxhighlighter/scripts/';
    var args = arguments, result = [];
    for(var i = 0; i < args.length; i++)
    result.push(args[i].replace('@', scripts_path));
    return result
};
SyntaxHighlighter.autoloader.apply(null, path(
                                              'applescript            @shBrushAppleScript.js',
                                              'actionscript3 as3      @shBrushAS3.js',
                                              'bash shell             @shBrushBash.js',
                                              'powershell ps          @shBrushPowerShell.js',
                                              'coldfusion cf          @shBrushColdFusion.js',
                                              'cpp c                  @shBrushCpp.js',
                                              'c# c-sharp csharp      @shBrushCSharp.js',
                                              'css                    @shBrushCss.js',
                                              'delphi pascal          @shBrushDelphi.js',
                                              'diff patch pas         @shBrushDiff.js',
                                              'erl erlang             @shBrushErlang.js',
                                              'groovy                 @shBrushGroovy.js',
                                              'java                   @shBrushJava.js',
                                              'jfx javafx             @shBrushJavaFX.js',
                                              'js jscript javascript  @shBrushJScript.js',
                                              'perl pl                @shBrushPerl.js',
                                              'php                    @shBrushPhp.js',
                                              'text plain             @shBrushPlain.js',
                                              'py python              @shBrushPython.js',
                                              'ruby rails ror rb      @shBrushRuby.js',
                                              'sass scss              @shBrushSass.js',
                                              'scala                  @shBrushScala.js',
                                              'sql                    @shBrushSql.js',
                                              'vb vbnet               @shBrushVb.js',
                                              'xml xhtml xslt html    @shBrushXml.js'
                                              ));
SyntaxHighlighter.all();
</script>

SyntaxHighlighter 3.0.83 的一些配置选项

SyntaxHighlighter的配置选项分为两类，一类是使用SyntaxHighlighter.defaults['配置选项']='值'的方式配置，另一类是使用SyntaxHighlighter.config.配置选项='值'的方式配置。

注意：配置语句必须在调用SyntaxHighlighter.all()之前

使用 SyntaxHighlighter.defaults['配置选项']='值' 的方式配置的选项

配置选项 缺省值 描述
auto-links true 如果此项开启，代码中的超链接文字将被a标签套上，也就可以点击了
class-name '' 为代码块加上自定义样式类，比如加上border
collapse false 在页面刚加载时，代码被折叠起来，如果代码篇幅较大，可以考虑考虑
first-line 1 行号从这个设置值开始，一般都是1
gutter true 是否显示行号
highlight null 高亮显示指定的代码行。可以通过单个数字来高亮显示单行，或者传入一个类似 [1,2,3] 的数组来高亮显示指定的多行。
html-script false 混合高亮html和script脚本，但是你必须载入xml的笔刷shBrushXml.js
smart-tabs false 智能缩进。有时候开启，能确保你的代码格式保持原貌，毕竟通过网页显示后缩进有些变形
tab-size 4 自定义tab宽度
toolbar true 是否显示工具栏（有问号的那个）。如果已将collapse打开，就不要关掉这个，否则就看不到代码了

以上配置选项都可以在<pre>标签的class中使用，例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<pre class="brush:php; html-script:true; toolbar:true; collapse:true" title="混合高亮html和php脚本">
  <html>
    <body>
      <div style="font-weight: bold"><?= str_replace("\n", "<br/>", $var) ?></div>
      <?
      /***********************************
       ** Multiline block comments
       **********************************/
      $stringWithUrl = "http://alexgorbatchev.com";
      $stringWithUrl = 'http://alexgorbatchev.com';
      ob_start("parseOutputBuffer");      // Start Code Buffering
      session_start();
      ?>
    </body>
  </html>
</pre>

使用 SyntaxHighlighter.config.配置选项='值' 的方式配置的选项

配置选项 缺省值 描述
bloggerMode false 不理解，没用过
strings -- 允许用户自定义系统消息:expandSource,help,alert,noBrush,brushNotHtmlScript
\/ \/ 配置方法：SyntaxHighlighter.config.strings.noBrush="你是不是忘了拿刷子了？"
stripBrs false 如果你的编辑软件为每一行的结束自动加上
标签,这个选项允许你忽略它们
tagName 'pre' 配置代码块的标签。没事别动，用默认的pre比较好

配置示例

1
2
3
4
5
SyntaxHighlighter.defaults['toolbar']=false;//隐藏问号按钮
SyntaxHighlighter.defaults['class-name']='highlightsetting';//自定义CSS设置
SyntaxHighlighter.defaults['auto-links']=false;//超链接设定显示为文字
SyntaxHighlighter.config.space=' ';//消除Chrome复制时的空白BUG
SyntaxHighlighter.all();

在样式文件中添加：

1
2
3
4
5
6
.highlightsetting {
    /*修正右边滚动条之BUG*/
    overflow-y: hidden !important;
    /*加入代码边框*/
    border: 1px solid #2187BB;
}

去掉SyntaxHighlighter 3.0.83 右边的滚动条

修改你所使用的 core 系列样式文件，如 shCore.css。

方法一：

修改.syntaxhighlighter table：

1
2
3
4
.syntaxhighlighter table {
  width: 100% !important;
  margin: 1px 0 !important;
}

方法二：

修改 .syntaxhighlighter：

1
2
3
4
5
6
7
8
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  padding:1px;
}

参考网站

  1. SyntaxHighlighter 官网

本作品由 Yysfire 创作，采用知识共享许可协议进行许可。转载时请在显著位置标明本文永久链接：
http://yysfire.github.io/vim/vimwiki-syntaxhighlighter.html

相关文章

最后修改
2012-07-10 23:28
发表时间
2012-07-10 22:50
本文标签
SyntaxHighlighter 1 Vim 5 VimWiki 1
关注我
侧栏导航