8年前
经常需要折腾一下代码,本想安装个Prismjs插件,但却不支持typecho0.9。于是想到了之前在网上看到的一款谷歌的代码高亮,百度查找,折腾半天,终于搞定成功。
源码下载:https://github.com/google/code-prettify
使用方法:
第一步,引入prettify.js和prettify.css
<link href="prettify.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="prettify.js"></script>
第二步,在body的onload事件里添加函数”prettyPrint()”
<body onload="prettyPrint()">
第三步,pre标签添加CSS类“prettyprint linenums”
<pre class="prettyprint linenums">代码</pre>或者
<code class="prettyprint">代码</code>
都可以。
如果引用了jquery的话,也可以这样,使用js动态添加,免去手功增加的麻烦。
<script> $(document).ready(function() { $(".entry pre").addClass("prettyprint linenums"); }); </script>
注意上面的.entry类需要修改成你自己的。
其中的prettify.css是可以修改成你自己喜欢的颜色。借助几个实例,我组合了一下就成了以下这样的了。
12121哈哈