• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

WordPress网站该怎么插入代码高亮

WordPress 云落 3年前 (2014-12-29) 821次浏览 已收录 8个评论
文章目录[隐藏]

本篇文章主要阐述了博猪所理解的 WordPress 代码高亮,可能有理解不对的地方。

WordPress 网站该怎么插入代码高亮

前言

前几天有朋友和我说我推荐的代码高亮插件有问题,不能用,然后经过了解之后发现,在代码高亮这方面有很多人还有一些不理解的地方,今天博猪就简单的讲讲

代码高亮的使用

WordPress 网站使用代码高亮一般都是用pre标签包围,然后配合一定的 JavaScript 和 CSS,来实现代码高亮的。
但是我们首先要知道 WordPress 为了安全,是禁止在 WordPress 文章里面直接插入代码的,会自动将代码进行转义,这样,我们发出来的代码就会发生变化或者直接无法显示,对比,我们一般是采用两种方法。一个是的直接禁止 WordPress 代码转义,直接贴原生的代码。另一个是首先对代码进行一边代码转义,然后再经过 WordPress 自带的代码转义一遍,就会变成你想要的代码。(此划分为本人自己理解,可能有错)根据这两种方法,可以具体分为很多方法。

简单的说,要么转义两次,要么一次不转义,否则就会出现问题。

代码高亮的方法

代码高亮方法多多,但是基本都是基于几种常见的高亮方案的,比如 syntaxhighlight, Google Code Prettify,Geshi,Prism 这几种常见的。

代码方法

所谓的代码方法就是相对于使用插件来说的,主要就是将代码高亮所需的 JavaScript 文件和 CSS 文件直接内置到主题里面,不需要插件就可以实现代码高亮的,这种方法 好处就是不需要插件,很简单,主题自带。

缺点就是换主题的时候就比较麻烦了。

插件方法

这个也很好理解,就是使用插件来实现代码高亮的方法,WordPress 代码高亮的插件很多很多,但是基本都是基于我上面提到的几种高亮方案的。插件有很多,有很强悍的插件,也有很小巧的插件,具体采用的话需要看具体情况,这个我下面再说。使用插件的优点嘛,就是跨主题,主题再换代码高亮也不会改变(如果不冲突的话)。

缺点嘛,就是多了个插件,然后可能还有插件自身的问题吧。

代码高亮的使用环境

这里我可能着重说的是插件了,具体讲讲代码高亮的使用环境。
WordPress 编辑器分为两种,可视化和文本编辑器。刚刚接触 WordPress 的朋友可能都会使用可视化编辑器,对文本可能不太喜欢,但是个人还是推荐使用文本。咳咳咳,跑题了,代码高亮插件分为可视化使用,文本编辑使用,或者可视化和文本兼顾,另外有的插件还提供代码输入框,有的插件没有输入框。所以,同样的代码高亮插件,可能大的能有几 M,小的只有十几 k。
首先说说可视化环境,一般来说要么提供按钮,点击弹出代码输入框,要么就是直接显示代码输入框,在输入框里面直接粘贴代码,然后上传就是,其实在可视化输入代码的都是属于转义两次的。在文本环境使用代码高亮一般是使用某种特殊的标签将代码包围,可能会有也有部分插件提供输入框。这里的代码有的是经过转义的,有的是不需要转义的,看插件具体情况吧。

在使用代码高亮的时候,一般都有有提示的,在输入代码之后就不要调节编辑环境了,就是说,你在文本编辑中输入了代码,就不要改到可视化编辑器了,不然代码可能会被转义,但是可视化输入的代码可以改到文本模式。这一点尤其重要。

代码高亮插件的选择

根据上面说到的,你首先需要知道你一般都是在什么环境里面编辑代码,可视化?或者文本?这一点最重要,然后选择插件。
除了这一点还有一个问题就是“大而肥”和“小而美”的选择了。为什么这么说呢,因为有的插件(大而肥)支持很多编码语言,而我们经常用到的也就 PHP,JavaScript,CSS,HTML 这几种吧,多了我们也用不到。还有有的插件会自带很多漂亮的样式,而一般也就用一种而已,多了个的东西都是浪费资源,另外在页面打开的时候代码显示的也比较慢。而有的插件(小而美)只提供几种常用的编程语言以及几种样式而已,整体非常小巧,页面加载的时候也比较快。

博猪使用的 wp code highlight 就是属于小而美的插件,基于 Google Code Prettify 代码高亮方案,适用于文本编辑环境。

代码高亮方案的变动

一般来说,代码高亮方案是不动的,如果需要变化,换插件的话,最好遵循两个原则,是最好,不是说一定要。
首先,代码高亮方案尽量是相同的,(举例,欲思主题的代码高亮方案是 Google Code Prettify,我使用的代码高亮插件也是基于 Google Code Prettify 的 )这样的好处就是标签的兼容。
第二个就是,转义方式尽量也是相同的。(举例,欲思主题的代码高亮是转义两次,而我的代码高亮插件是禁止转义的,所以当时麻烦了一些)转义方式不同的直接后果就是代码粗线乱码或者直接消失。这个问题我当时也遇到过,后来搞明白了也就好了。

代码高亮插件切换后的处理

这个说的就是上面提到的转义方式不同导致的问题,为什么会粗线乱码问题呢?还是拿欲思主题举例,欲思主题的自带代码高亮方案是需要经过两次转义,然后将两次转义后的代码呈现出来,变成正确的代码。启用 wp code highlight 插件之后插件会禁用 WordPress 的代码转义功能,所以,导致的问题就是代码经过一次转义就被显示出来了,所以呈现的代码都会粗线乱码。

想要解决也很简单,其实所谓的乱码就是一些转义字符而已,如果在编辑器里面用编辑器的 Ctrl+H 功能就可以了,在 WordPress 里面我们需要 search&replace 插件,这个插件很简单,启用之后在 connet 里面替换转义字符和原生字符就可以了,实质就是对数据库表单里面的数据进行批量修改罢了,修改一下就好了。


乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress 网站该怎么插入代码高亮
喜欢 (17)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 好呀
    哈笑2015-01-22 12:25 回复 Windows 8 | Firefox浏览器 35.0
    • 云落
      这个看着乏味吧
      云落2015-01-22 12:57 回复 Windows 8.1 | Firefox浏览器 31.0
  2. 看看了
    BT导航(bbs.btleader.com)2015-01-17 18:17 回复 Windows 7 | Chrome 31.0.1650.63
  3. 找这篇文章很久了,技术帖,顶。感谢博主无私分享!大家支持起来
    优壹佰2015-01-06 14:37 回复 Windows 7 | 搜狗浏览器 2.X
  4. 支持博主,非常精劈。好文章。谢谢分享http://www.u100kb.com
    空包网2015-01-06 11:30 回复 Windows 7 | 搜狗浏览器 2.X
  5. :grin: :mrgreen: 不错不错的哦
    小朱看月亮2015-01-04 08:39 回复 Windows XP | Chrome 21.0.1180.89
  6. 好高端的节奏
    同盟源2015-01-02 12:34 回复 Windows 7 | Chrome 39.0.2171.95
  7. 学习了
    薄荷糖的味道2014-12-30 09:15 回复 Windows 7 | Chrome 38.0.2125.122