目前比较流行的几个 WordPress 代码高亮插件数量比较多,但是目前WordPress高亮代码插件虽然种类多,样式全,但是很难找到一个很中意的,一般来讲,采用插件的方式会有这样的弊病:体积庞大,导致页面加载速度不尽人意;依赖性强,如果插件出现问题,所有显示代码的部分就会产生错乱;使用如 windows live writer 一类的客户端用户使用起来比较麻烦,因为据了解大部分插件是没有对应匹配的客户端插件的。
在网上寻觅了一下,发现知更鸟推荐的一款离线的无插件版的代码高亮软件算得上对热衷使用WordPress客户端用户的最佳方案了。
软件名称:CodeRenderUnmi
这款软件支持的着色语言为:
java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi
这款软件的原理是,首先在网页中部署相应的CSS文件,或者直接整合到自己的CSS文件中。然后使用桌面版的软件,将代码复制并转换,软件会自动为代码添加对应的样式标签,最后发布在网页上即为着色完成的代码了。
本站已经使用了这款软件,显示的效果也很令人满意。
其中的样式有我自己根据自己的喜好修改了一部分。
安装使用CodeRenderUnmi方法
1、首先下载压缩包,解压后,里面有5个文件。
CodeRender.hta(hta网页主程序,可以直接运行)
CodeRender.ico(图标文件)
highlight.css(样式文件)
readme.txt(说明文档)
shCore.js(着色动作脚本)
使用之间需要把highlight.css
中的内容全选复制到自己的网站的CSS文件中,或者直接把这个文件复制到网站目录,并在头部引用该文件。文件大小6KB,内含有各种语言的着色样式,如果确信自己不会用到的语言,可以把对应的CSS代码删掉,可以通过判断CSS的命名判断语言类型。
注意:WordPress程序默认会把半角符号替换为全角,这样一来,别人复制你的代码就不能用了。可以在WordPress主题后台的function.php
中添加这样的代码,关掉这个功能。要放在<?php
和?>
之间。
- remove_filter('the_content', 'wptexturize');
2、使用的时候,需要打开CodeRender.hta,然后在Source Code栏中贴上代码,Lang选择对应的代码类型,点击Render之后,在HTML Code 会显示HTML源码,HTML Preview 会显示预览效果,而option中的选项,只要点一下,在预览看一下就知道是什么意思了。编辑文章的时候,只要复制HTML源码,然后粘贴到博客的源码编辑模式下,就可以使用了。
样式修改建议
为适应响应式网页,避免产生左右滑动条,可以设置自动换行。
为.dp-highlighter ol li, .dp-highlighter .columns div
增加word-wrap: break-word; word-break: normal;
感谢你的赏识与认可
支付宝
微信支付
使用手机访问这篇文章
本文许可协议 © CC BY-NC-SA 4.0 转载请注明来源
我来了
交换友链 http://huanglv.me/p 消灭星星
好的,友链已经添加
友链 已加
我更喜欢这样的,css直接加到代码了:https://cyhour.com/codehighlighting
尝试自己向里面添加matlab样式,没有成功……
求帮助
采用的js和文中的很不一样:http://prismjs.com/download.html