如何高亮代码

20 Nov 2012 by LelouchHe

折磨

其实也算不上折磨啦,不过对于不了解html/css/js的人,想要一下子搞定还真麻烦.

要知道以下几点:

pages从本质来说是替换模版.

对于代码来说,替换之后其实就是在代码外围加了两个标签而已,比如

int main()
{
    printf("hello world\n");
    return 0;
}

在pages的模版引擎替换之后,就是如下代码:

<pre>
<code>
int main()
{
    printf("hello world\n");
    return 0;
}
</code>
</pre>

这些节点元素(即node)是可以通过js动态的添加属性的,比如在prettify上面说的,需要在pre标签添加prettyprint的class属性才行,这样我们通过简单的js来实现

var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++)
{
    pres[i].setAttribute("class", "prettyprint");
}

这样就把所有的pre标签添加了

整个prettify需要提前加载进来,按照readme的说法,需要添加onload,如下

var bodies = document.getElementsByTagName("body");
bodies[0].setAttribute("onload", "prettyPrint()");

其实通过以上四步就简单解决了代码高亮的问题,不过这还只是基本的问题,搭建一个技术类的博客还需要很多知识,这个还要慢慢的学习.

希望能有所帮助.