给WordPress代码高亮显示(不用插件)

发表日志的时候难免会遇到要贴代码的时候,要是省事贴了文本上去,感觉太对不起群众了。所以还是要搞个代码高亮的东西的。

CodeRenderUnmi一款本地转换代码高亮显示的小工具,支持的语言有:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi。

方便在你的博客中粘贴代码,自定相应的样式的话可以在highlight.css 里面.Text 支持自定义样式或在模板里加上语法样式,然后用CodeRenderUnmi生成相应代码,复制后贴到博客里就能高亮显示了。

这个工具的操作蛮简单的,Source Code 中贴上你要着色的代码,然后选择语种,点击 Render 按钮就会在 HTML Code 中生成相应的 HTML 代码,同时在 HTML Preview 中可以预览到效果。

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

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

最后还要正确显示还需要在wordprss主题加载“highlight.css”的样式文件。

打开header.php在顶部<link>…</link>标签前面或者后面添加

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

 

不过要注意按照以上代码,highlight.css要放到主题目录下CSS文件夹中,如果没有这个文件夹,放到主题目录下,修改插入代码

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

其次可以把highlight.css里的代码复制到主题style.css中,上面的步骤就不用做了。

此时如认为默认的样式不好看的,可以通过修改“highlight.css”中的样式改变代码高亮、边框、背景等颜色,更个性化。

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

我在修改时,也遇到这个情况,复制的时候符号变化了,一直没有成功。还有就是如果代码实际显示的时候没有显示行号,而左边框有两条线,说明行号数字被挤压没了,修改下

  1. .dp-highlighter ol   
  2. {   
  3.     margin0px 0px 1px 32px/* 1px bottom margin seems to fix occasional Firefox scrolling */  
  4.     padding2px;   
  5.     color#2B91AF;   
  6. }   

里margin 的第四个PX数字

关于符号的具体解决办法是:

打开并编辑 wp-includes/formatting.php 文件,找到以下代码:

  1. // static strings    
  2.  $curl = str_replace($static_characters$static_replacements$curl);    
  3.  // regular expressions    
  4.  $curl = preg_replace($dynamic_characters$dynamic_replacements$curl);    
  5. $curl 开头的两句代码注释掉,如下:    
  6. // static strings    
  7. //$curl = str_replace($static_characters, $static_replacements, $curl);    
  8. // regular expressions    
  9. //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);    

效果如下

PHP:

  1. <div id="movenavi">   
  2.     <div class="moveup"></div>   
  3.     <div class="movecomt"></div>   
  4.     <div class="movedown"></div>   
  5. </div>    

 

CodeRenderUnmi

http://dl.dbank.com/c0li6v0nf2

0 条评论