给WordPress代码高亮显示（不用插件）

代码如诗 2011-04-04 0条评论

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

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.     margin: 0px 0px 1px 32px; /* 1px bottom margin seems to fix occasional Firefox scrolling */  
  4.     padding: 2px;   
  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

版权声明：本文为原创文章，版权归 neo 所有。

本文链接：https://idayer.com/%e7%bb%99wordpress%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae%e6%98%be%e7%a4%ba%ef%bc%88%e4%b8%8d%e7%94%a8%e6%8f%92%e4%bb%b6%ef%bc%89/

知识共享许可协议
本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

0 条评论