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

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

今天推荐的是一款本地转换代码高亮显示的小工具:CodeRender,本程序是基于 dp.SyntaxHighlighter 写的代码语法着色的工具。支持的语言有:

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

下载地址:http://pan.baidu.com/s/1kTzAMO3

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

方法:

1、首先,把highlight.css上传到所使用主题目录中;

2、其次:打开header.php,查找:

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

3、在后面添加:

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

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

解决办法:

  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);

具体效果:

PHP:

  1. //评论字数限制
  2. function doufuru_comment_length( $commentdata ) {
  3. $minCommentlength = 3; //最少字数限制
  4. $maxCommentlength = 220; //最多字数限制
  5. $pointCommentlength = mb_strlen($commentdata['comment_content'],'UTF8'); //mb_strlen 1个中文字符当作1个长度
  6. if ( $pointCommentlength < $minCommentlength )
  7. {
  8. header("Content-type: text/html; charset=utf-8");
  9. wp_die('
  10. 抱歉,您的评论太短了,请至少输入' . $minCommentlength .'个字(已输入'. $pointCommentlength .'个字)<a href="javascript:history.go(-1);">返回文章页</a>
  11. ');
  12. exit;
  13. }
  14. if ( $pointCommentlength > $maxCommentlength )
  15. {
  16. header("Content-type: text/html; charset=utf-8");
  17. wp_die('
  18. 抱歉,您的评论太长了,请少于' . $maxCommentlength .'个字(已输入'. $pointCommentlength .'个字)<a href="javascript:history.go(-1);">返回文章页</a>
  19. ');
  20. exit;
  21. }
  22. return $commentdata;
  23. }
  24. add_filter( 'preprocess_comment', 'doufuru_comment_length' );

CSS:

  1. .comment-author img{
  2.     width:54px;height:54px; /*设置图像的长和宽,这里要根据自己的评论框情况更改*/
  3.     border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
  4.     -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
  5.     -moz-border-radius:27px;
  6.     box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
  7.     -webkit-box-shadow: inset 0 -1px 0 #3333sf;
  8.     -webkit-transition: 0.4s;
  9.     -webkit-transition: -webkit-transform 0.4s ease-out;
  10.     transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
  11.     -moz-transition: -moz-transform 0.4s ease-out;
  12. }
  13. .comment-author img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
  14.     box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  15.     -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  16.     transform: rotateZ(360deg);/*图像旋转360度*/
  17.     -webkit-transform: rotateZ(360deg);
  18.     -moz-transform: rotateZ(360deg);

原文地址: http://www.blogjava.net/Unmi/archive/2008/05/03/197903.html

分享到:

11 条评论

昵称
  1. 喵小姐
    这个技能赞!!!
  2. 极雪
    蛋疼的一件事是复制代码会加上行号
    1. Ryan
      绝对是浏览器的原因
  3. xilouqingzhu
    学习下,高亮插件载入的东西太多
    1. Ryan
      是啊,能不用插件就不用插件
  4. 于尼玛
    CodeRender这货赞一个
    1. Ryan
      CodeRender的确不错,不过有待我们去改进
  5. 神父
    so 叼,捡起来了,多谢
    1. Ryan
      就是用这有点麻烦
  6. Jimmy
    沙发吗?
    1. Ryan
      这次是了