Twitter Subscribe to PHP Blog RSS Feed Email RSS

Vimwiki 语法高亮

添加评论 2015年7月26日
可以转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明

几年前开始用的 SyntaxHighlighter2 插件来给代码语法高亮,由于懒一直没有更换,今天实在看不下去,而且又发现 PRISM 的简洁耐看,于是决定将 Blog 和 Wiki 页面都替换过来。

WordPress 的话很简单,可以使用插件,或者如下:

  1. 这里按需求下载
  2. 加载 prism.js 与 prism.css
  3. 需要高亮的代码用 <pre><code class=”language-xxx”></code></pre> 包围

但是我使用的 Vimwiki 生成 pre 标签的语法下不能再加生成 code 标签的语法,所以我尝试用我粗陋的 jQuery 技能来实现一下。

$("#content pre").each(function() {
    var language = $(this).attr('class');
    $(this).wrapInner("<code class='" + language + "'></code>");
});

在 default.tpl 模板文件中,头部加载 prism.css,然后在</body>标签前加入 jQuery 的 js 文件,然后代码如下:

接下来加载 prism.js

在 Vimwiki 中使用

{{{class="language-php"
echo "Hello World!";
}}}

评论