不用插件实现WORDPRESS代码高亮显示 - 爱萝莉的Ryan

Ryan

不用插件实现WORDPRESS代码高亮显示
偶尔在日志中加入一些代码,感觉完全没必要安装代码高亮插件,万一某天不用插件了,页面可能会很乱。其实大部分插件都是在...
扫描右侧二维码阅读全文
09
2014/03

不用插件实现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

搬瓦工年付$187机房套餐补货了,电信联通优化,512M内存/500G流量/1G带宽,建站稳定,优惠码:BWH1ZBPVK,【点击购买】!
搬瓦工年付$28CN2高速线路,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快,建站稳定,优惠码同上,【点击购买】!
Last modification:March 16th, 2016 at 05:11 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

11 comments

  1. 喵小姐

    这个技能赞!!!

  2. 极雪

    蛋疼的一件事是复制代码会加上行号

    1. Ryan
      @极雪

      绝对是浏览器的原因

  3. xilouqingzhu

    学习下,高亮插件载入的东西太多

    1. Ryan
      @xilouqingzhu

      是啊,能不用插件就不用插件

  4. 于尼玛

    CodeRender这货赞一个

    1. Ryan
      @于尼玛

      CodeRender的确不错,不过有待我们去改进

  5. 神父

    so 叼,捡起来了,多谢

    1. Ryan
      @神父

      就是用这有点麻烦

  6. Jimmy

    沙发吗? :arrow:

    1. Ryan
      @Jimmy

      这次是了