lizongbo at 618119.com 工作,生活,Android,前端,Linode,Ubuntu,nginx,java,apache,tomcat,Resin,mina,Hessian,XMPP,RPC

2007年11月28日

参考Google Syntax Highlighter for WordPress 定制纯Javascript实现的代码语法高亮

Filed under: JavaScript,Web — 标签:, , — lizongbo @ 12:30

Google Syntax Highlighter for WordPress. 是代码加亮插件,但是该插件与文章的可视化编辑存在冲突,
参考 : http://www.ajaxgo.org/press/?p=6

并且在 pre标签内如果写 xml代码,在可视化编辑的情况下,就会被SyntaxHighlighter转出一堆转码字符,
而在源代码模式下,如果浏览器禁用了 Javascript,则无法看到完整的xml内容.
加之我喜欢在代码里使用 [ code ] [ /code ] 这样用中括号的标记,
SyntaxHighlighter却只支持 pre标记,于是我根据这个插件,针对自己的博客做了改造.

实现简洁方便的语法高亮,既不影响后台对文章的编辑效果,也不影响文章在启用javascript和禁用 Javascript两种情况下的显示.

实现的思路如下.

在显示文章的页面里,
通过Javascript动态查找到 class为entry的div,这个就是显示文章内容的地方了,
然后操作innerHtml,将[ code ]与 [ /code ]之间的html内容进行解析替换,
自动识别代码类型然后将其转换为 pre 标记,再调用dp.SyntaxHighlighter.HighlightAll(‘code’),进行代码高亮.

我的具体操作步骤如下:

1.下载 http://downloads.wordpress.org/plugin/google-syntax-highlighter.1.5.1.zip
(也可以直接下载 http://syntaxhighlighter.googlecode.com/files/SyntaxHighlighter_1.5.1.rar,不过需要调整一下相关目录
上传到服务器之后保持google-syntax-highlighter目录即可.)
2.解压上传到 http:///618119.com/wp-content/plugins/
(后台管理中不要启用插件)
3.编写三个js文件,并上传到服务器.
highlighter.js  http://618119.com/wp-content/plugins/google-syntax-highlighter/Scripts/highlighter.js
mySyntaxHighlighter.js http://618119.com/wp-content/plugins/google-syntax-highlighter/Scripts/mySyntaxHighlighter.js
doSyntaxHighlighter.js http://618119.com/wp-content/plugins/google-syntax-highlighter/Scripts/doSyntaxHighlighter.js

4.在wp-content/themes/default/single.php中加上

<script class=”javascript” src=”/wp-content/plugins/google-syntax-highlighter/Scripts/highlighter.js”></script>

这行加在 <?php get_footer(); ?> 的前面.

这样就实现了纯js的 语法高亮,且不对现有的可视化编辑造成影响,也支持用户在禁止了 Javascript的情况下正常浏览.
由于使用的动态增加css和js,因此对于禁止Javascript的情况下,浏览速度非常快,和没启用语法高亮一样.

我写的js代码大致有:

[code]

//如果存在code标记,则加载语法高亮的JavaScript
var codeTag=”code”;//code标记名
var highlighterUriPerfix=”/wp-content/plugins/google-syntax-highlighter/”;
var postElement=null;
//找到class 为 entry的对象进行处理
var tags=document.getElementsByTagName(“div”); // class 为 entry
for(var i = 0; i < tags.length; i++)
if(tags[i].className.indexOf(“entry”) >=0)
postElement= tags[i];
if(postElement!=null && postElement.innerHTML.indexOf(“[“+codeTag+”]”)>0){
document.write(“<script class=\”javascript\” src=\””+highlighterUriPerfix+”Scripts/mySyntaxHighlighter.js\”><\/script>”);
}

[/code]

不过代码中对html标记过滤掉处理还不够完善,,对代码的类型自动识别没怎么处理,但基本够用了.

Google Syntax Highlighter for WordPress 在: http://wordpress.org/extend/plugins/google-syntax-highlighter/
SyntaxHighlighter在 : http://code.google.com/p/syntaxhighlighter/

Powered by WordPress