这段时间在折腾typecho主题的代码高亮,尝试了很多的方案但是都不是很满意,如果使用插件的解决方案,个人不是很喜欢。
这里我使用Google Code的一款开源的js库Prettify.js,它提供一种简单的形式来着色HTML页面上的程序代码,最值得亮点的地方是不需要指明代码的语言类型,它会自动进行判断。大家也可以在网上找到相对应的wiki。
Github:code-prettify
CDN加速:BootCDN
大家可以访问上面的git地址获取代码文件,不建议去其他地方去下载不能保证代码的完整性。下面简单介绍我使用的折腾方法。
实现高亮的步骤
- 在Github获取代码压缩包,解压得到
prettify.js
、prettify.css
、run_prettify.js
文件,上传到你的主题相对应文件夹 - 编辑你的主题的
header.php
或者footer.php
文件去添加以下代码,进行引入CSS
、JS
<link rel="stylesheet" href="css/prettify.css" />
<script type="text/javascript" src="js/prettify.js"></script>
- 在页面进行加载执行处理
在官方的文档当中,在body的标签中添加onload事件来执行
<body onload=”prettyPrint()”>
这里就可以使用代码高亮了,但是我的主题好像不支持这个东西,使用了onload事件也没有反应,但是在F12调试的时候,输入prettyPrint()
才能进行渲染,不然相当于没有生效。
还有一种方法是把prettify.js
替换成run_prettify.js
就可以不用在body里面写onload事件,就可以让代码自动加载。
Markdown编辑器可以加高亮标签来使用,如果使用HTML要添加<pre> </pre>
来实现高亮。我这里就直接使用JQuery来直接实现,记得在主题引入Jquery文件,很多网站都引用了应该不成问题
$(window).load(function(){
$("pre").addClass("prettyprint"); //给pre标签加一个父标签选择器
prettyPrint(); //代替body上的onload事件
})
$('pre').each(function(){
if( !$(this).attr('style') ) $(this).addClass('prettyprint'); //给pre标签添加父标签选择器
prettyPrint(); //代替body的onload事件
})
显示行号
Prettify可以通过添加linenums
元素来添加行号,但是要注意行号的显示的代码
显示格式一:
<pre>
<code>
HelloWord!!!
</code>
</pre>
显示格式二:
<pre>
HelloWord!!!
</pre>
通过查看你的源代码看你的输出是怎么的,typecho是第一种方法,这里可以给code
添加linenums
元素来显示
$('code').each(function(){
if( !$(this).attr('style') ) $(this).addClass('prettyprint linenums')
参考CSS: https://github.com/googlearchive/code-prettify/blob/master/src/prettify.css
最新评论
我现在基本都不是用QQ了,电脑没装,手...
我成为了范例 😃
看起来很完美。
1ro.cn 还收不,怎么联系不到人
你的feed貌似有点问题。你看下。`v...
哈哈哈,路过。看到了