偶尔在日志中加入一些代码,感觉完全没必要安装代码高亮插件,万一某天不用插件了,页面可能会很乱。其实大部分插件都是在代码中强行加入一些标签,然后用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,查找:
- <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
3、在后面添加:
- <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />
但需要注意的是Wordpress会自动把半角符号替换为全角,别人复制下来的函数代码标点是全角的,无法使用,切记!
解决办法:
- 打开并编辑 wp-includes/formatting.php 文件,找到以下代码:
- // static strings
- $curl = str_replace($static_characters, $static_replacements, $curl);
- // regular expressions
- $curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
- 将$curl 开头的两句代码注释掉,如下:
- // static strings
- //$curl = str_replace($static_characters, $static_replacements, $curl);
- // regular expressions
- //$curl = preg_replace($dynamic_characters, $dynamic_replacements, $curl);
具体效果:
PHP:
- //评论字数限制
- function doufuru_comment_length( $commentdata ) {
- $minCommentlength = 3; //最少字数限制
- $maxCommentlength = 220; //最多字数限制
- $pointCommentlength = mb_strlen($commentdata['comment_content'],'UTF8'); //mb_strlen 1个中文字符当作1个长度
- if ( $pointCommentlength < $minCommentlength )
- {
- header("Content-type: text/html; charset=utf-8");
- wp_die('
- 抱歉,您的评论太短了,请至少输入' . $minCommentlength .'个字(已输入'. $pointCommentlength .'个字)<a href="javascript:history.go(-1);">返回文章页</a>
- ');
- exit;
- }
- if ( $pointCommentlength > $maxCommentlength )
- {
- header("Content-type: text/html; charset=utf-8");
- wp_die('
- 抱歉,您的评论太长了,请少于' . $maxCommentlength .'个字(已输入'. $pointCommentlength .'个字)<a href="javascript:history.go(-1);">返回文章页</a>
- ');
- exit;
- }
- return $commentdata;
- }
- add_filter( 'preprocess_comment', 'doufuru_comment_length' );
CSS:
- .comment-author img{
- width:54px;height:54px; /*设置图像的长和宽,这里要根据自己的评论框情况更改*/
- border-radius: 27px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素,即为圆形了*/
- -webkit-border-radius: 27px;/*圆角效果:兼容webkit浏览器*/
- -moz-border-radius:27px;
- box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
- -webkit-box-shadow: inset 0 -1px 0 #3333sf;
- -webkit-transition: 0.4s;
- -webkit-transition: -webkit-transform 0.4s ease-out;
- transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读)*/
- -moz-transition: -moz-transform 0.4s ease-out;
- }
- .comment-author img:hover{/*设置鼠标悬浮在头像时的CSS样式*/
- box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
- -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
- transform: rotateZ(360deg);/*图像旋转360度*/
- -webkit-transform: rotateZ(360deg);
- -moz-transform: rotateZ(360deg);
原文地址: http://www.blogjava.net/Unmi/archive/2008/05/03/197903.html
这个技能赞!!!
蛋疼的一件事是复制代码会加上行号
绝对是浏览器的原因
学习下,高亮插件载入的东西太多
是啊,能不用插件就不用插件
CodeRender这货赞一个
CodeRender的确不错,不过有待我们去改进
so 叼,捡起来了,多谢
就是用这有点麻烦
沙发吗?
这次是了