非插件实现wordpress代码高亮

前端开发 3054 Views 0 Comments

就在刚刚发布怎么用CSS实现小三角形效果这篇文章的时候,发现个问题,代码无法高亮,我相信很多wordpress站长都十分的需要吧,特别是从小白晋级为大神的阶段,博客里难免会出现很多代码的记录保存以作备忘,这个时候就十分需要代码高亮的功能能够让我们贴出的代码美观易于阅读,实现wordpress代码高亮的方法有很多,例如插件,百度一下,什么10大wordpress代码高亮插件、wordpress最强大代码高亮插件的全出来了,我也不否认他们的强大性!

但是再强大无非也就是代码高亮而已,遇见那些不经常贴代码的童靴来说,安装这么一款强大的插件又有些浪费的赶脚,那什么样的办法能够既方便又小巧还利于用户体验呢?

今天说的,就是非插件wordpress代码高亮的实现!

这里简约的说下其含义吧,意思就是让你们的主题加载一段css后,通过CodeRender生成出来的代码,贴进我们的wordpress博客后就能够立马显示出美观的样子出来。

1、下载文件后,解压得到highlightx.css文件,将其文件放到wordpress主题的根目录下,然后进行其css文件的调用;或者直接粘贴在主题style.css里。现在你的主题就支持CodeRender输出内容的样式显示了!下载地址

2、转换代码,去这里www.asheep.cn/highlight将你的源码粘贴,选择代码的语言,这里支持的语言有:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi 。然后点击转换,得出的html代码即为我们要复制贴进wordpress文章编辑里的,当然复制的时候,wordpress最好是文本模式,非可视化模式!!!

3、到这里本教程应该全部结束了,但是还有个致命的问题发生,就是我们放进去的代码会被Wordpress自动把半角符号替换为全角,这样带来的问题就是,别人复制你的代码后,无法正常使用。。。操作方法就是找到我们主题文件的functions.php,打开后在最下面贴上

//禁止代码标点转换
remove_filter('the_content', 'wptexturize');

有可能,只是有可能你会遇到个小问题,就是发布后,代码高亮行间距很大,审查元素一看,每行下多了<br />换行符,我的解决办法是,压缩html,让其无换行。

到这里,就全部OK了,非插件wordpress代码高亮的实现就是这么简单!具体效果看:怎么用CSS实现小三角形效果

有问题请留言。

转载请注明:一只羊博客 » 非插件实现wordpress代码高亮

分享到:
(0)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址