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

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

知更鸟

站长

关注

2332
文章

0
粉丝

WordPress25195,207阅读模式

偶尔在日志中加入一些代码，感觉完全没必要安装代码高亮插件，万一某天不用插件了，页面可能会很乱。其实大部分插件都是在代码中强行加入一些标签，然后用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

fangcaoba.com 5
2012年4月9日 19:02:35 湖南省 101F
回复
鸟哥，拜托加下我qq 1028135490 遇到问题实在解决不了了。要不把邮箱地址告诉我也行，我把ftp等资料给你，你有时间帮我解决一下谢谢
刚刚 1
2012年4月11日 16:26:50 上海市 102F
回复
用推他相册,他们的相册也是免费的.不防外链.
小老翁 1
2012年5月10日 23:12:36 湖南省长沙市 103F
回复
感谢分享，我正在搜集呢！
amasun 1
2012年5月14日 20:03:38 山东省济南市 104F
回复
为什么：
“打开并编辑 wp-includes/formatting.php 文件，找到以下代码：”……
这行代码显示为颜色#0196e3。而不是highlight.css中的黑色？
- amasun 1
  2012年5月14日 20:30:50 山东省济南市 B1
  回复
  @ amasun 应该是#2b91af。但我还是不知道是为什么这个颜色，我选的php。
  - amasun 1
    2012年5月14日 21:16:26 山东省济南市 B2
    回复
    @ amasun 经过一番折腾，终于发现了。鸟哥是不是在coderender生成代码之后把其中的<span>标签都去掉了？所以本来的黑色文字可以显示为#2b91af?还是因为鸟哥有其他的方法？其他帖子里的代码都带着<span>标签。
simple 3
2012年5月18日 02:50:31 北京市 105F
回复
请教鸟哥：日志怎么显示代码？比如你这个文章最后的10行解决办法，是怎么样实现显示的，并且有行号？我并不需要高亮，只要显示就行了。我尝试使用code夹起来，不行。
谢谢，谢谢
simple 3
2012年5月19日 01:32:46 北京市 106F
回复
鸟哥的意思是：本文的办法，有高亮代码的功能，当然也就可以显示代码？所以，要想在wordpress日志加入一些代码，使用这个办法就行了
simple 3
2012年5月19日 01:44:16 北京市 107F
回复
谢谢鸟哥，真的是这样！我懂了
asmylife.com 4
2012年6月1日 23:17:47 浙江省宁波市 108F
回复
鸟哥，这工具只能在windows平台使用，虽然linux下也有类似代码高亮工具，但毕竟风格不一样，效果所这样的：[wordpress]代码高亮工具-linux篇
我在想，鸟哥是不是可以放个教程教我们把这个工具的功能集成到wordpress的编辑器中去，这样就随时随地编辑了。
- 知更鸟
  2012年6月2日 00:48:54 中国 B1
  回复
  @ asmylife.com 此功能非我出品
  还是用代码高亮插件吧
alaric 0
2012年6月6日 22:09:33 浙江省杭州市西湖区 109F
回复
不错的博客
一品香茗 1
2012年6月23日 12:59:39 上海市嘉定区 110F
回复
看上去挺麻烦的
Mee 4
2012年8月4日 12:03:10 浙江省 111F
回复
鸟哥，我是直接把代码复制到样式表文件中的，然后现在也可以正常的显示代码高亮的功能，但是有一个小细节，就是我的代码高亮效果中在行号的左侧有一定距离的空白，显得不那么好看，不知道这个要在哪修改，如果鸟哥不是很明白我说的什么，请移步至http://meeior.tk/index.php/show-the-tinymce-editor-button-hidden.html这里，然后看我的行号，还请鸟哥赐教！
- 知更鸟
  2012年8月4日 12:20:08 中国 B1
  回复
  @ Mee 查找高亮样式
  margin: 0px 0px 1px 38px;
  把其中的　38px　改小点
Mee 4
2012年8月4日 12:23:05 浙江省 112F
回复
嗯，解决了，谢谢鸟哥的帮助，我会继续努力的哈！
南昌男科医院 0
2012年8月7日 16:48:19 江西省南昌市 113F
回复
按照你所说的操作一直不成功
sealango 5
2012年8月25日 14:25:23 上海市 114F
回复
求助：我一篇文章里写了很多段代码。想在默认状态下，这些代码都是折叠隐藏的。当访客去点了，才会展开。这个功能，在这里能实现吗？
- 鬼娃娃 2
  2012年10月12日 13:33:30 福建省福州市 B1
  回复
  @ sealango 那是插件有一个。。。
  - sealango 5
    2012年10月12日 13:40:28 上海市 B2
    回复
    @ 鬼娃娃叫什么名字？
    - 鬼娃娃 2
      2012年10月12日 14:23:20 福建省福州市 B3
      回复
      @ sealango SyntaxHighlighter Evolved就是这个咯
ycqj 1
2012年9月18日 21:55:05 湖北省宜昌市 115F
回复
我用的是2.7.1版本的，应该修改的地方好像已经修改好了，但怎么都无法实现和你的站点一样的效果
http://www.91xmv.com/wordpress/217.html
塵清枫 4
2012年9月20日 15:33:52 福建省福州市 116F
回复
正需要
鬼娃娃 2
2012年10月12日 13:29:06 福建省福州市 117F
回复
有没有办法把添加的那些html也集成到编辑器中，
- 我爱动感单车网 7
  2016年2月29日 11:13:35 广西桂林市雁山区 B1
  回复
  @ 鬼娃娃如今的主题基本上都已经将代码高亮功能集成到编辑器中了，需要用到的时候省事、方便，再也不用再这么折腾了。我对自己博客的这个功能还是挺满意的，样式也美观！
鼬 3
2012年10月13日 08:10:26 广东省广州市 118F
回复
博主，不知到为什么我不能实现和你一样的效果，首先序号都在竖条的后面，然后代码会偶尔空一行，留言中的切换到可视化再发表已经用过。请博主指教。（之前发错地方，不好意思。）
- 知更鸟
  2012年10月13日 09:40:02 中国 B1
  回复
  @ 鼬应该是与主题样式有冲突
- 安也宓 4
  2012年10月21日 14:48:11 浙江省 B1
  回复
  @ 鼬我也遇到相同问题了，序号在竖条的后面
- Live in ur dream 0
  2017年5月20日 15:52:44 陕西省西安市 B1
  回复
  @ 鼬小弟知道解决的办法，一般是由于高亮的代码中的li标签一般有个list-style: circle inside;的css属性，直接添加一个list-style: none;即可解决。如果还不懂可以Q我：928085589
小鱼 2
2012年10月30日 11:02:00 河南省南阳市 119F
回复
咱们自带的怎么使用啊？｛demo href=”http://”]效果演示[/demo]，也有这样的代码吗？我不会用样式表里面的东西，大菜鸟。
吴文辉IT博客 3
2012年12月20日 10:38:44 浙江省杭州市 120F
回复
鸟哥，请问我按照你的方法实现了，就是粘帖后最上面第一行都会是伊层空格，请问需要删除什么呢？
- 知更鸟
  2012年12月20日 10:58:36 中国 B1
  回复
  @ 吴文辉IT博客日志发布后，前台不会有空格
  - 吴文辉IT博客 3
    2012年12月20日 11:03:04 浙江省杭州市 B2
    回复
    @ 知更鸟有的，你看我这篇文章就有http://www.wuwenhui.cn/?p=744
  - 吴文辉IT博客 3
    2012年12月20日 20:51:20 浙江省杭州市 B2
    回复
    @ 知更鸟这是什么原因？
吴文辉IT博客 3
2012年12月24日 12:34:24 浙江省杭州市 121F
回复
鸟哥，求帮忙看下这个什么原因，我按你的方法，最上面就是会有一行空格，这是页面
http://www.wuwenhui.cn/?p=725
- 吴文辉IT博客 3
  2012年12月25日 08:55:48 浙江省杭州市 B1
  回复
  @ 吴文辉IT博客已自行解决
  - 吴文辉IT博客 3
    2012年12月25日 09:13:14 浙江省杭州市 B2
    回复
    @ 吴文辉IT博客将生成代码第一行的
    删除
    - 知更鸟
      2012年12月25日 12:32:41 中国 B3
      回复
      @ 吴文辉IT博客你生成的代码中第一行多了一个空行符，正常情况下不会有….
      - 吴文辉IT博客 3
        2012年12月25日 12:47:21 浙江省杭州市 B4
        回复
        @ 知更鸟嗯，我后来删除了，但是我每次生成都有，不知道还有没别的谁跟我一样情况
碎碎念 2
2013年4月10日 14:02:31 广东省茂名市 122F
回复
果然是个神器啊，把带有代码的文章统统修改了一遍，感觉专业多了，感谢鸟哥的分享啦！
Rainc 2
2013年4月15日 12:42:53 湖南省湘潭市 123F
回复
鸟哥，为什么我的代码高亮看上去很不鲜艳，没有您的代码高亮鲜艳。不知道是怎么回事
Rainc 2
2013年4月15日 12:44:27 湖南省湘潭市 124F
回复
鸟哥，为什么我的代码高亮看上去总显得那么的无色。很不鲜艳，不知道是怎么回事。鸟哥可以帮我看看么。http://raincchina.com/355.html
DeargGae 0
2013年5月14日 16:04:08 河南省郑州市 125F
回复
我使用了该方法后，代码框内呈现原背景色和模板背景色按行交替显示，自己猜测此代码与模板存在冲突，但是又不知道怎样定位冲突点，请问您能够提供些意见或方法？
氪星人 1
2013年6月18日 21:10:49 河北省秦皇岛市 126F
回复
鸟哥，我用的是你的最新主题，哪个竖线还有前面的序列号的颜色怎么改啊？还有这个有滚动条了(这是地址：http://www.liyucang.cn/?p=636)，我没用这个小工具CodeRenderUnmi，我是在这转换的：http://zmingcx.com/coderender，有人说用这个插件SyntaxHighlighter Evolved，但我不是很喜欢用插件，鸟哥请告诉我，百度半天了都！
瓶几 0
2013年9月11日 18:45:50 江西省萍乡市 127F
回复
不知道有没有支持shell代码高亮的法子？
yuger 1
2013年9月19日 23:42:19 湖南省衡阳市 128F
回复
请问鸟哥你提供下载的文件是保存在虚拟主机里还是网盘里？我虚拟主机容量不够，需要找一个支持外链的网盘，谢谢。
花醉 0
2013年10月15日 16:20:00 北京市 129F
回复
顶..
小全 1
2013年12月29日 12:46:25 广东省江门市新会区 130F
回复
大哥，你哪个在线代码高亮转换功能可以分享给我吗？
- 知更鸟
  2013年12月30日 12:26:09 中国 B1
  回复
  @ 小全直接网页另存到本地就可以了
  - 小全 1
    2013年12月30日 12:30:18 广东省江门市新会区 B2
    回复
    @ 知更鸟可不可以把代码分享出来啊，直接保存的代码不太好
    - 知更鸟
      2013年12月30日 14:14:19 中国 B3
      回复
      @ 小全该代码已集成在我用的HotNews主题中，自行提取
小全 1
2013年12月30日 20:15:33 广东省江门市新会区 131F
回复
晕，你的新版主题启动后出现错误
c4d8 0
2014年11月20日 09:21:11 上海市嘉定区 132F
回复
博主，我用了你的方法但是前面的行号显示不出来，是怎么回事啊？
http://c4d8.tk/201410/256.html
易淘金股票池 2
2014年12月31日 13:47:17 河南省开封市 133F
回复
谢谢分享
慕梓阁 0
2015年1月26日 18:08:46 江苏省盐城市 134F
回复
遇到个问题，发上来看博主清不清楚，这个插件有个control选项
点击后生成的高亮代码支持 js效果就是点击view可以页面跳转到新的页面方便复制但是这个插件生成后却保留的是电脑的本地地址
La.Kai 0
2015年4月13日 15:29:46 北京市 135F
回复
同求不显示行号啊！！！http://blog.i-jiapin.com/126.html
korin 0
2015年5月21日 16:32:57 广东省广州市 136F
回复
鸟哥，请问你博客代码高亮的是插件还是主题实现的？
- BOKE123 5
  2015年5月21日 17:11:42 广西南宁市 B1
  回复
  @ korin 鸟哥所有主题的代码高亮都是通过代码实现的，非插件
阿峙 0
2015年7月3日 16:38:06 北京市 137F
回复
准备试试，我就是因为用了插件，现在想去都去不掉了
性爱姿势 1
2015年8月25日 10:24:35 广东省深圳市 138F
回复
感觉那么乱呢
kuluso 1
2015年8月31日 23:18:04 湖北省武汉市 139F
回复
按照步骤来确实有用但是点击 view print 没有演示的效果那样弹出个框
- kuluso 1
  2015年9月1日 00:37:37 湖北省武汉市 B1
  回复
  @ kuluso 我看了一下，你调用了一个onclick函数来实现，但是我这两天才刚开始接触WP，首先还没搞明白如何添加CSS文件和JS文件，样式方面如你所言，拷贝到style.css中就可以了，但是文章编辑中不能出现onclick=”******“类似的内容所以一直没有成功等你回复前我先想想
  - sunny 1
    2016年6月3日 19:31:48 浙江省杭州市 B2
    回复
    @ kuluso 我刚自己做了一个主题，一起研究学习
广州网站建设 2
2015年10月26日 12:41:03 广东省广州市 140F
回复
没看懂是怎么弄的
广州网站建设 2
2015年10月26日 13:17:47 广东省广州市 141F
回复
首先，把highlight.css上传到所使用主题目录中；
其次：打开header.php，添加<link rel="stylesheet" href="/highlight.css” />
这两个步骤怎么能实现呢？
- 知更鸟
  2015年10月26日 15:20:25 中国 B1
  回复
  @ 广州网站建设直接把highlight.css中的样式代码加到主题样式文件style中就可以了
  关键是需要那个转换代码的程序
  - 广州网站建设 2
    2015年10月27日 11:10:29 广东省广州市 B2
    回复
    @ 知更鸟鸟哥，把代码放置到主题样式文件style中之后，自己网站怎样才会产生高亮代码的页面呢？
广州网站建设 2
2015年10月27日 11:28:32 广东省广州市 142F
回复
象鸟哥的这个页面http://zmingcx.com/coderender/要怎样才能生成呢
- 知更鸟
  2015年10月27日 19:22:45 中国 B1
  回复
  @ 广州网站建设我的ality主题有类似的页面模板，下载自行研究
  http://zmingcx.com/wordpress-theme-ality.html
  - 广州网站建设 2
    2015年10月28日 10:16:35 广东省广州市 B2
    回复
    @ 知更鸟谢谢鸟哥
广州网站建设 2
2015年10月30日 22:33:31 广东省广州市 143F
回复
鸟哥，使用WordPress 主题：Ality，请问代码高亮页面怎样在新窗口打开？
若我若鱼 0
2016年6月8日 11:39:14 浙江省杭州市 144F
回复
发现了一个bug
粘贴python 的readline()函数，会出现两个readline
比如
line=popen.stdout.readline().strip()
转换后，就这样了
line=popen.stdout.readlinereadline().strip()
- boke112导航 5
  2016年10月23日 14:34:37 广西南宁市 B1
  回复
  @ 若我若鱼这个情况我也遇到过，不知道怎么解决。比如输入if(empty($url))PHP转换，就会变成if(emptyempty($url))
随小风 1
2017年6月17日 21:18:45 江苏省苏州市 145F
回复
学习了。这样博客看着专业多了
阿瓦达 0
2020年5月24日 10:01:10 湖南省长沙市 146F
回复
博主，我现在还在用这个。但是如果我不用他了，那我原来的代码怎么办？（比如转平台）
12121 0
2020年5月24日 12:31:43 河南省郑州市 147F
回复
有没有办法把添加的那些html也集成到编辑器