CXH.ME

octopress代码着色

 
  • Jun 22, 2014

markdown有自己支持的代码模块，但是想支持着色，就需要单独对代码进行parse和加上css。octopress支持自己的代码语法，但是比较麻烦，并且是本地渲染，对不同语言需要指定。

所以还是js渲染比较方便一点，我们可以用google code prettify进行着色，在markdown里面只要对代码加入缩进（tab或者四个空格）。服务端引入如下js:

<link href="/javascripts/google-code-prettify/prettify.css" media="screen, projection" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/javascripts/google-code-prettify/prettify.js"></script>

<script type="text/javascript" >
<!--
    $(function() {
      $('pre').addClass('prettyprint').attr('style', 'overflow:auto');
      window.prettyPrint && prettyPrint();
      $('table').addClass('table')
});
-->
</script>

google code prettify的样式可以这里选择，关于行号的一些问题参见这里。

参考文献:

[1] google code prettify, https://code.google.com/p/google-code-prettify/

[2] google code prettify theme, http://jmblog.github.io/color-themes-for-google-code-prettify/

[3] Jekyll中使用google-code-prettify高亮代码, http://blog.evercoding.net/2013/02/27/highlight-code-with-google-code-prettify/

Search