Heroin blog

jekyll-bootstrap添加代码高亮

jekyll-bootstarp是用markdown写博文的, 但是markdown默认不支持pre加class属性

但是, 支持直接在markdown中写html代码, 传送门

修改/includes/themes/twitter/default.html, 添加几行代码

<link href="{\{ ASSET_PATH }\}/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{\{ ASSET_PATH }\}/google-code-prettify/prettify.js"></script>

其中上传了2个文件, 请对应放好相对应的目录下.

再添加一段js, 让其生效, js代码如下

!function ($) {
    $(function(){
        window.prettyPrint && prettyPrint();
    });
}(window.jQuery);

写文章的时候而不是用markdown语法, 直接将要高亮的代码用pre标签包围

<pre class="prettyprint linenums">
    <!-- 包围其中 -->
</pre>
blog comments powered by Disqus

发布日期

2012-05-22

标签

最近发表