怎样实现不用插件使WordPress代码高亮(加色)


对于一个技术站的博客,要展示代码的地方很多。为了美化代码的显示效果,使WordPress代码高亮显示是最好的方式。目前网络上有许多WordPress代码高亮的插件,不过都很臃肿。

例如常见的WordPress代码高亮插件

1、Google Syntax Highlighter for WordPress

一款帮助开发者/coder 发表代码片段更加简单和漂亮的插件。完全基于javascript。Google Syntax Highlighter目前还是博主们的流行选择。Google Syntax Highlighter 有一个文本化的工具栏,没有Syntax Highlighter家族那么花俏但是却功能一样。不过无法实现切换从可视模式到HTML模式。

2、Code Colorer

这是国人根据 Chroder.com 的 WordPress Code Highlight 插件修改而成的WordPress代码高亮插件。但 CoolCode 插件在它基础上修改了很多的内容。支持10多种语言代码,详情看作者的发布页。

3、Syntax Highlighter

一个使用可视化标记并且在不同模式之间切换还能工作的插件。一旦你在可视化模式粘贴代码,不需要加上转义字符,这是在可视化编辑模式下的优势。但是当我使用它自带的例子时,不管我怎么做,我都没有办法通过WP-SynHightlight为代码着色。

4、WP-Syntax

支持高亮、添加行序号,复制到剪贴板等功能

插件地址:http://wordpress.org/extend/plugins/wp-syntax

5、Raw HTML

最简洁的代码美化插件了吧应该是,运行在服务器端,也就说不写入js

插件地址:http://wordpress.org/extend/plugins/raw-html

6、Highlight Source Pro

支持高亮、添加行序号,同样运行在服务器端,也就说不写入js

插件地址:http://wordpress.org/extend/plugins/highlight-source-pro/

7、CodeHighlighter

支持高亮、可以修改CSS文件改变样式,样式简洁

插件地址:http://wordpress.org/extend/plugins/code-highlighter/

8、WP-CodeBox

支持高亮、添加行序号、下载代码、粘贴到剪贴板和代码折叠等功能,不知道为什么在我的博客上面为什么启用不了,大家用了的给提个建议

下载地址:http://downloads.wordpress.org/plugin/wp-codebox.zip

9、CodePress Plugin for WordPress

下载地址:http://downloads.wordpress.org/plugin/wp-codepress.zip

插件带来的问题

基本上安装上面的代码高亮插件,都会出现一个明显的现象,网站访问速度明显下降。其实大部分插件都是在代码中强行加入一些标签,然后用CSS定义样式,此外还需加载许多的JS,通过查看页面源文件可以清楚地看到。最大的问题是万一某天不用插件了,页面代码将全部显示乱掉。

无插件实现的方法

方法1:借助一个叫“发芽网”的在线代码高亮转换网站

使用发芽网 的代码高亮编辑器,使用很简单,把你的代码直接贴到编辑器里面,然后复制html到你的网页里面,代码就高亮显示了,你还可以自定义背景颜色与字体样式,效果应该比代码高亮插件丰富得多。如果感兴趣可以到发芽网试试,但每次转换都需打开网址操作略显麻烦。

效果:

CSS语言 :
#site-title a {
color : #000 ;
font-weight : bold ;
text-decoration : none ;
}
#site-description {
clear : rightright ;
float : rightright ;
font-style : italic ;
margin : 14px 0 18px 0 ;
width : 220px ;

方法2:借助一款本地转换代码高亮显示的小工具:CodeRender

CodeRender小软件,本程序是基于dp.SyntaxHighlighter 写的代码语法着色的工具,支持常见的语言,例如java/xml/sql/jscript/groovy/css/cpp/c#/python/vb /perl/php/ruby/delphi。

CodeRender

操作很容易,在Source Code 中贴上你要着色的代码,然后选择语种,点击 Render 按钮就会在 HTML Code 中生成相应的 HTML 代码,同时在 HTML Preview 中可以预览到效果。Copy生成 的HTML 代码,在日志编辑窗口切换到HTML源代码编辑模式,粘贴就可以了。

软件下载地址:

  代码高亮显示的小工具:CodeRender 文件大小:24.3 KB
更新时间:2010/08/21 累计下载:179 次

不过要想正确显示代码高亮还需在WordPress主题中加载代码样式文件“highlight.css”(在软件下载的压缩包中存在一个highlight.css的文件)。

建议大家直接复制highlight.css中的代码到主题style.css文件中。如果你不喜欢原有的代码高亮方式,可以通过 修改“highlight.css”中的样式改变代码高亮、边框、背景等颜色。

当然你也可以在将highlight.css文件上传到主题目录下,在header.php中加载highlight.css。

方法如下:

  1. < link   rel = “stylesheet”   type = “text/css”   href = “<?php bloginfo(‘template_directory’); ?>/style.css”   />    

方法缺陷:

WordPress默认会自动把半角符号替换为全角,那样别人复制下来的函数代码标点是全角的,就无法正常使用。因此需要修改wordpress程序文件。

方法1:

打开主题的functions.php文件, 添加下面的代码,让文章内容的过滤器失效, 达到显示代码的作用。

  1. <?php remove_filter(‘the_content’, ’wptexturize’); ?>   

方法2:

  1. 打开并编辑 wp-includes/formatting.php 文件,找到以下代码:    
  2. // static strings    
  3. $curl  =  str_replace ( $static_characters $static_replacements $curl );    
  4. // regular expressions    
  5. $curl  = preg_replace( $dynamic_characters $dynamic_replacements $curl );    
  6. $curl  开头的两句代码注释掉,如下:    
  7. // static strings    
  8. //$curl = str_replace($static_characters, $static_replacements, $curl);    
  9. // regular expressions    
  10. //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);    

效果如下:



  1. <?php  // Do not delete these lines   

  2.      if  (‘comments.php’ ==  basename ( $_SERVER ['SCRIPT_FILENAME'])) {   

  3.          die  (‘Please  do  not load this page directly. Thanks!’);   

  4.     }   

  5.    if  (! empty empty ( $post ->post_password)) {   

  6.      if  ( $_COOKIE ['wp-postpass_' . COOKIEHASH] !=  $post ->post_password) {   

  7.         ?>   

  8.         <p  class = “alert” >This post is password  protected . Enter the password to view comments.</p>   

  9.         <?php   

  10.          return ;   

  11.     }   

  12.   }   

  13.   

  14.    $countComments  = 0;  $countPings  = 0;   

  15.    if  ( $post ->comment_count > 0) {   

  16.      $comments_list  =  array ();   

  17.      $pings_list  =  array ();   

  18.      foreach  ( $comments   as   $comment ) {   

  19.          if  (‘comment’ == get_comment_type())  $comments_list [++ $countComments ] =  $comment ;   

  20.          else   $pings_list [++ $countPings ] =  $comment ;   

  21.     }   

  22.   }   

  23.   

  24. ?> 

猜你喜欢

转载自zhang1120peng.iteye.com/blog/843045