SyntaxHighlighter–用JS来高亮你的代码!
2008-6-16 15:07一直在研究DEDECMS,但是对于我这种人来说他的编辑器很是恼火，因为我时常需要在文章里面贴代码，而DEDE里面用的FCDEditor是改装版的，我改起来非常之麻烦，曾经尝试过用FCK自带的代码高亮效果，但是没有用，昨天看到一个叫SyntaxHighlighter的东西，JS的，用起来效果非常之好，我就想能不能移植到DEDE上呢？
SyntaxHighlighter用起来十分之简单，只需要导入CSS文件和相应的JS文件，然后把代码放到<pre></pre>部分中再定义一下就好了，例：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>无标题文档</title>
- </head>
- <body>
- <pre name="code" class="PHP:collapse:firstline[10]">
- echo "this is a test";
- var_dump($arr);
- </pre>
- <link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
- <script language="javascript" src="Scripts/shCore.js"></script>
- <script language="javascript" src="Scripts/shBrushPhp.js"></script>
- <script language="javascript" src="Scripts/shBrushXml.js"></script>
- <script language="javascript" src="Scripts/shBrushCss.js"></script>
- <script language="javascript" src="Scripts/shBrushJscript.js"></script>
- <script language="javascript" src="run.js"></script>
- </body>
- </html>
pre部分参数介绍:
class: 定义代码的类型，例如PHP或者Java;
nogutter 不显示列 nocontrols 不显示顶部的控制条(复制等) collapse 折叠代码 firstline[value] 定义起始行号，默认为1 showcolumns 显示行号
它还有一个HighlightAll的方法，可以高亮显示本页所有以pre或者textarea 包围的代码.
function dp.SyntaxHighlighter.HighlightAll(name, [showGutter], [showControls], [collapseAll], [firstLine], [showColumns])
name 必须 <pre> 或者 <textarea> 的名字. showGutter 可选 是否显示列号. showControls 可选 是否显示控制条. collapseAll 可选 是否折叠代码. firstLine 可选 起始行号. showColumns 可选 是否显示行号.
另外还找到一个现成的代码：有人以及把它做成插件集成到FCK里面了，嘿嘿，这不是帮我的大忙了么？不用我自己搞了^_^
附:
SyntaxHighlighter下载地址：http://code.google.com/p/syntaxhighlighter/downloads/list
FCK的SyntaxHighlighter下载地址(使用说明在文件中有): fck_highlighter.7z
再附(呵呵):一个现成的代码高亮的网站，可以把你贴进去的代码进行高亮处理，支持多个主题，可直接复制粘贴高亮代码到各个网站、blog主流编辑器。地址:http://www.fayaa.com/code/new/
Seaprince:
2008-6-19 09:25:18
看我的就是了，很久了。在FCK编辑器里加了一个按钮。
半瓶墨水:
2008-6-25 09:12:20
效果不错。
也可以考虑到代码发芽网贴一下然后复制粘贴到blog，这样无须插件就有代码高亮了，有几种配色主题可供选择。
比如我在百度空间贴的这一篇：
http://hi.baidu.com/2maomao/blog/item/124fd31bfa6461d0ad6e7583.html
代码发芽网网址：
http://www.fayaa.com/code/
完整的介绍：
http://www.2maomao.com/blog/code-fayaa-beta/
sharmy:
2008-6-25 11:41:46
汗….