不用插件实现WordPress代码高亮显示

2010年8月1日 12:48:46知更鸟

知更鸟

站长

2558
文章

0
粉丝

关注

私信

WordPress25198,760阅读模式

偶尔在日志中加入一些代码，感觉完全没必要安装代码高亮插件，万一某天不用插件了，页面可能会很乱。其实大部分插件都是在代码中强行加入一些标签，然后用CSS定义样式，通过查看页面源文件可以清楚地看到。

今天推荐的是一款本地转换代码高亮显示的小工具：CodeRenderUnmi

[download id="39"]

本程序是基于 dp.SyntaxHighlighter 写的代码语法着色的工具。支持的语言有:

java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi。

在线代码高亮转换

可方便用于你的博客中粘贴代码，只要自定相应的样式 (highlight.css 的内容，.Text 支持自定义样式或在模板里加上语法样式)，然后复制用这个工具生成的 HTML 代码就能让你的代码着高亮显示。可以加入更多语种的支持，本程序就是在 dp.SyntaxHighlighter 的基础上扩展了对 Perl 语言的支持，网上可以找到相应语法的 JS 代码和 CSS。语言扩展支持通过在 shCore.js 和 highlight.css 加入相应代码即可。

猛击查看程序界面

操作很容易，Source Code 中贴上你要着色的代码，然后选择语种，点击 Render 按钮就会在 HTML Code 中生成相应的 HTML 代码，同时在 HTML Preview 中可以预览到效果。

简要说明：Lang 下拉框可以选择所支持的语法，Options 右边的 Gutter、Controls、CollapseAll、FirstLine、Columns 是控制生成的额外的元素，逐一点试试就知道了。每个内容显示(输入)区都提供了 Copy/Paste/Clear 快捷操作链接，还有一个总的 Clear 按钮。

Copy生成的HTML 代码，在日志编辑窗口切换到HTML源代码编辑模式，粘贴就可以了。

不过要想正确显示代码高亮还需在WordPress主题中加载样式文件“highlight.css”（在下载的压缩包中）

方法：

首先，把highlight.css上传到所使用主题目录中；

其次：打开header.php，查找：

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />

在后面添加：

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />

当然，你也可以复制highlight.css中的所有代码到你主题style.css中，以上步骤就免了！

如认为默认的样式不符合自己的要求，可以通过修改“highlight.css”中的样式改变代码高亮、边框、背景等颜色，更个性化。

但需要注意的是Wordpress会自动把半角符号替换为全角，别人复制下来的函数代码标点是全角的，无法使用，切记！

解决办法：

打开并编辑 wp-includes/formatting.php 文件，找到以下代码：
// static strings
$curl = str_replace($static_characters, $static_replacements, $curl);
// regular expressions
$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
将$curl 开头的两句代码注释掉，如下：
// static strings
//$curl = str_replace($static_characters, $static_replacements, $curl);
// regular expressions
//$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);

注:使用IE核心浏览器复制代码时会将行号一起复制下来，可以参考这篇文章去掉行号：小技巧:帮你批量删除代码前的行号，或才使用火狐、chrome等浏览器。

具体效果在第２页：

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

1 2

我的微信

微信号已复制

本站原创文章转载请注明文章出处及链接，谢谢合作！

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

本文由 知更鸟 发表于2010年8月1日 12:48:46
转载请注明：https://zmingcx.com/wordpress-code-highlight.html | 知更鸟

WordPress

598845006

咨询主题请加Q：598845006

多功能主题 Begin

评论 251 访客 138 作者 27

Carrie
2010年8月1日 23:02:35 1F
回复
這樣又能少用一款插件了，感覺很不錯，不過還得稍作修改一番。
QiQiBoY
2010年8月1日 23:10:14 2F
回复
这个不错。。。。
winy
2010年8月1日 23:48:15 3F
回复
要是谁能做个wlw插件就更好了。。。
雅岚
2010年8月5日 01:35:02 4F
回复
想用用来着，可是又把我看得头昏眼花。。。算了，哈哈
民工成
2010年8月9日 20:57:28 5F
回复
good，挺不错的啊，能少个插件就少一个~
淘宝最好的减肥药
2010年8月12日 13:13:03 6F
回复
看起来好麻烦，头晕中
uyghurbeg
2010年8月25日 05:03:13 7F
回复
我发现,你的博客的图片在闪闪,不知道怎么弄?
- 知更鸟
  2010年8月25日 08:51:32 B1
  回复
  @ uyghurbeg 看这个
  https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html
笨小孩
2010年8月27日 17:38:37 8F
回复
我把他弄成在线的了，哈哈~~
给个演示地址：在线演示
可惜是免费空间有广告，预览效果不是很完整，囧….
- 笨小孩
  2010年9月7日 15:40:10 B1
  回复
  @ 笨小孩大侠，能把你现在在用的这个工具发给我吗？
  我发现下载的那个html符号全是大写，而且代码也没你的简洁，希望能得到你的这个，我邮箱：darknet@qq.com 谢谢了！！！
  - 知更鸟
    2010年9月7日 16:03:48 B2
    回复
    @ 笨小孩文章中有下载链接，我用的也是这个
    - 笨小孩
      2010年9月7日 17:30:40 B3
      回复
      @ 知更鸟为什么你的源码中的代码要比我们的简洁一些了？而且全是小写的，应该是你修改了shCore.js，我对比了我们生成的代码，我们的有很多不必要的代码，而你的却没有，本来是想自己修改的，但是工作量太大了，再加上自己不是很懂，所以就厚脸皮问你要你的文件了，希望大侠能发一份你的工具。
豌豆尖
2010年9月3日 09:59:09 9F
回复
使用怎么也达不到以上的效果，而且数字序号和代码挨在一起，序号左边是分割线，郁闷啊，是不是还要修改highlight.css啊？？？
- 知更鸟
  2010年9月3日 10:38:20 B1
  回复
  @ 豌豆尖这个是与你用的主题样式文件冲突
  - 豌豆尖
    2010年9月3日 11:02:33 B2
    回复
    @ 知更鸟回复好快啊！用的是Elegant Box 4.1.1主题，有办法解决没？对这方面不是很懂！
桔子
2010年9月21日 15:16:46 10F
回复
谢谢，安上了，效果不错。比以前的插件好多了。
阿鼎
2010年9月28日 11:19:34 11F
回复
鸟哥，我按照你说的做了，但是行与行之间为什么有空格，看着没你上面的美观，演示地址
- 知更鸟
  2010年9月28日 13:05:24 B1
  回复
  @ 阿鼎嗯，确实有这个问题，不过也很好解决：
  在源代码模式粘贴完转换的代码后，再切换到可视化编辑模式发布，即可
  - 阿鼎
    2010年9月28日 16:42:42 B2
    回复
    @ 知更鸟 3Q,鸟哥，呵呵，等待你出3.0，呵呵！加油！
    - Ken
      2010年9月29日 15:58:08 B3
      回复
      @ 阿鼎顶一下～等待中
  - 沫夏
    2011年11月7日 22:32:02 B2
    回复
    @ 知更鸟原来这样，成功解决行与行之间含有空格现象，谢谢。
  - 程春杰博客
    2012年5月5日 11:29:10 B2
    回复
    @ 知更鸟精妙啊，在这里我发现了评论的巨大意义，我也碰到了类似问题，在此找到解决方法，，谢谢鸟哥
洋葱
2010年10月7日 00:37:09 12F
回复
我用你的方法，代码是高亮了，可是显示出来的是全角的。文章在这里http://blog.aonion.com/2010/10/no-plug-ins-are-two-ways-to-achieve-the-relevant-log/
问题是在formatting.php吗？这样改吗？
// static strings
$curl = str_replace($static_characters, $static_replacements, $curl);
// regular expressions
$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
// static strings
//$curl = str_replace($static_characters, $static_replacements, $curl);
// regular expressions
//$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
- 知更鸟
  2010年10月7日 06:16:04 B1
  回复
  @ 洋葱只需在两个$curl前加上// ，后面最好有一英文空格
凡尘飞扬
2010年10月9日 15:44:30 13F
回复
试试看，插件用的比较多，该少用点了
朵未
2010年10月25日 22:26:58 14F
回复
请问这个该如何调用？
邪客
2010年10月26日 11:48:47 15F
回复
编辑器里面显示正常，但是发布以后不显示行数，请教博主何故？
例：http://www.xeker.org/archives/1424
谢谢！
- 知更鸟
  2010年10月26日 11:55:22 B1
  回复
  @ 邪客可能你用的主题样式文件与这个冲突
  去掉这句
  #content li {
  list-style-type:none;
  }
bestchao
2010年10月26日 17:19:30 16F
回复
鸟哥不知你现在使用的代码高亮功能是插件还是修改版本？
- 知更鸟
  2010年10月26日 23:01:29 B1
  回复
  @ bestchao 晕菜…我白写这么长的使用说明了
Ding
2010年10月29日 08:38:46 17F
回复
测试下有邮件没
yesureadmin
2010年11月2日 14:38:02 18F
回复
不错，不过，还是觉得插件省事，这个插件是少不了的啦
easy
2010年11月8日 13:30:47 19F
回复
这个我喜欢,多谢分享!
七寂
2010年12月11日 21:53:30 20F
回复
博主用的了你的软件文章的第1篇代码显示正确的
后来我又在文章下面的粘贴代码
结果显示每段代码中间都空一行
不知道怎么回事
- 知更鸟
  2010年12月11日 22:14:24 B1
  回复
  @ 七寂从代码编辑模式，切换到可视化再发布，即可
  - 七寂
    2010年12月11日 22:42:48 B2
    回复
    @ 知更鸟多谢啦搞定了
sky
2010年12月30日 10:07:50 21F
回复
还是觉得好麻烦的啊
likebeta
2011年1月13日 11:19:15 22F
回复
哈哈,我找了一个coolformat也不错,离线编辑也不错,插件每一个真正好用的
- 知更鸟
  2011年1月13日 12:17:13 B1
  回复
  @ likebeta 除了代码沉余外，没有行号
  - 路过
    2011年5月18日 15:01:34 B2
    回复
    @ 知更鸟代码发芽网也是用这种方式的，在冗余的同时，却支持任何支持HTML网页、博客。好像也已经加了行号显示了
海子
2011年1月13日 11:43:07 23F
回复
鸟哥，我用了你介绍的高亮显示代码的使用方法，软件生成的效果和你发布在文章中的效果一样，但是我在发布时显示的效果没有外部的边框。
yixin
2011年1月23日 22:24:58 24F
回复
学习了，真的不错~~！！！
何苦呢
2011年1月30日 20:59:22 25F
回复
不用插件的话好麻烦呢
小司
2011年2月11日 14:12:06 26F
回复
鸟哥，麻烦问一下，我申请了免费的co.cc域名，现在与vista panel里的域名绑定起来了。就是在服务器/root下新建了以xsblog.co.cc为名字的文件夹，里面还有一个htdoc文件夹。然后，我想着是以后通过xsblog.co.cc这个域名访问页面，就不让它出现自带的三级域名了，那下一步应该怎么做啊，把wordpress放到哪儿呢
知更鸟
2011年2月11日 14:33:58 27F
回复
米玩过这个免费的空间
随便在空间里建一个目录把程序放进去，获得地址安装就行
碎语人生
2011年2月18日 19:56:36 28F
回复
代码太多了，我看得眼花缭乱
南阳吧
2011年2月24日 16:54:42 29F
回复
谢谢知更鸟大哥，正需要这样的，我去试试先。
你好美丽
2011年3月4日 15:40:25 30F
回复
不错的工具，下来用用！谢谢分享
晨光博客
2011年3月9日 22:17:55 31F
回复
不用插件是最好的
瞿胜佳
2011年3月13日 20:58:19 32F
回复
这个可以有。
Kael.Z
2011年3月15日 23:58:05 33F
回复
鸟哥，发布后看不到序号，编辑后切换回非代码模式时能看到序号，何解？
Kael.Z
2011年3月16日 20:41:16 34F
回复
鸟哥，我代码无法显示行号
- eng_4ow
  2011年3月17日 09:14:42 B1
  回复
  @ Kael.Z 测试
孤独快乐
2011年4月1日 16:54:55 35F
回复
为什么我的也不显示行号啊
- 知更鸟
  2011年4月3日 09:03:54 B1
  回复
  @ 孤独快乐应该是与你用的主题样式冲突
孤独快乐
2011年4月1日 17:08:03 36F
回复
我的也是不显示行号啊
Shovo
2011年4月6日 10:22:13 37F
回复
能不能做成插件整到编辑器中呢？