fatkun's blog » SyntaxHighlighter http://fatkun.com 又一个 WordPress 站点 Sun, 05 Feb 2012 15:21:33 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 【原创】Z-blog插件-SyntaxHighlighter for Z-blog代码高亮0.2版 http://fatkun.com/2009/10/%e3%80%90%e5%8e%9f%e5%88%9b%e3%80%91z-blog%e6%8f%92%e4%bb%b6-syntaxhighlighter-for-z-blog%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae0-2%e7%89%88.html http://fatkun.com/2009/10/%e3%80%90%e5%8e%9f%e5%88%9b%e3%80%91z-blog%e6%8f%92%e4%bb%b6-syntaxhighlighter-for-z-blog%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae0-2%e7%89%88.html#comments Tue, 13 Oct 2009 02:27:45 +0000 fatkun http://fatkun.com/?p=36 Z-blog里面的代码高亮插件(Highlight)已经是很久以前的了，作为一个写代码的人怎么可以没有代码高亮，让看代码的人舒服一点。现在是0.2版，可能还有很多问题。插件是把Highlight改的，改了来适应SyntaxHighlighter的使用，才用Z-BLOG差不多一个月，还没研究过怎么写插件，不过使用起来已经很好了。


SyntaxHighlighter是一个很多人使用的代码高亮JS工具，项目地址是http://code.google.com/p/syntaxhighlighter/，本插件使用的是2.0版本。
Z-blog里面的代码高亮插件(Highlight)已经是很久以前的了，作为一个写代码的人怎么可以没有代码高亮，让看代码的人舒服一点。现在是0.2版，一堆语言解析，好强大，可是做插件时累坏我，文件太多了可能还有问题。插件是把Highlight改的，改了来适应SyntaxHighlighter的使用，才用Z-BLOG差不多一个月，还没研究过怎么写插件。
以前也写过在Z-Blog上使用SyntaxHighlighter1.5（代码高亮，不复制行号）修改方法，但是不是插件，修改起来麻烦，也不方便。
更新后记住要“文件重建”
0.2版点击此下载
更新信息
0.2 版
+ 管理页面，能选择需要解析的语言。
0.1 alpha版
基础版本
当前已知的问题

1，插件没有配置页面，所以把所有JS都加载（0.2版已解决）

使用方法
[code=这里填写语言，例如html、C#等]这里写代码[/code]
下面是代码演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SyntaxHighlighter Build Test Page</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
	<script type="text/javascript" src="scripts/shBrushJava.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
	<script type="text/javascript" src="scripts/shBrushPython.js"></script>
	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
	<script type="text/javascript" src="scripts/shBrushScala.js"></script>
	<script type="text/javascript" src="scripts/shBrushSql.js"></script>
	<script type="text/javascript" src="scripts/shBrushVb.js"></script>
	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
		SyntaxHighlighter.all();
	</script>
</head>

<body >
<h1>SyntaxHihglighter Test</h1>
<p>This is a test file to insure that everything is working well.</p>

<pre class="brush: c-sharp;">
function test() : String
{
	return 10;
}
</pre>
</html>
]]> http://fatkun.com/2009/10/%e3%80%90%e5%8e%9f%e5%88%9b%e3%80%91z-blog%e6%8f%92%e4%bb%b6-syntaxhighlighter-for-z-blog%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae0-2%e7%89%88.html/feed 16 在Z-Blog上使用SyntaxHighlighter1.5（代码高亮，不复制行号）修改方法 http://fatkun.com/2009/09/%e5%9c%a8z-blog%e4%b8%8a%e4%bd%bf%e7%94%a8syntaxhighlighter1-5%ef%bc%88%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae%ef%bc%8c%e4%b8%8d%e5%a4%8d%e5%88%b6%e8%a1%8c%e5%8f%b7%ef%bc%89%e4%bf%ae%e6%94%b9%e6%96%b9.html http://fatkun.com/2009/09/%e5%9c%a8z-blog%e4%b8%8a%e4%bd%bf%e7%94%a8syntaxhighlighter1-5%ef%bc%88%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae%ef%bc%8c%e4%b8%8d%e5%a4%8d%e5%88%b6%e8%a1%8c%e5%8f%b7%ef%bc%89%e4%bf%ae%e6%94%b9%e6%96%b9.html#comments Sun, 20 Sep 2009 04:44:52 +0000 fatkun http://fatkun.com/?p=11 这里我是使用了SyntaxHighlighter1.51版本来修改的，到目前为止已经有SyntaxHighlighter2.0版本了。可以到这里下载：http://code.google.com/p/syntaxhighlighter/
至于选择1.5版本修改的其中一个原因是1.5版本前面的行号是用CSS实现的，直接复制代码时不会把前面的行号复制，这是我选择它的一个重要原因。


有插件了，看看这里【原创】Z-blog插件-SyntaxHighlighter for Z-blog代码高亮
这里我是使用了SyntaxHighlighter1.51版本来修改的，到目前为止已经有SyntaxHighlighter2.0版本了。可以到这里下载：http://code.google.com/p/syntaxhighlighter/
至于选择1.5版本修改的其中一个原因是1.5版本前面的行号是用CSS实现的，直接复制代码时不会把前面的行号复制，这是我选择它的一个重要原因。由于flash10不允许直接操作剪贴板，必须由用户激活falsh才能使用“复制按钮”，故1.5版使用复制的方法已经失效了。我参考了javaeye.com的修改方法，直接用一个flash为复制按钮（当然还有更好的方法，例如SyntaxHighlighter2.0已经实现了，还有我前面提到的Zero Clipboard项目）
我修改的这个版本可以在Z-Blog很好的使用~在下面我会打包发上来~
由于Z-Blog会把转行改为<BR>，所以我们要转换回来
废话少说，贴部分主要代码
在shCore.js找到下面这句代码

this.originalCode=code;this.code=Chop(Unindent(code));

改为：(也就是说把<BR>给替换回转行了)

code=code.replace(/&lt;BR>/ig, "\n");this.originalCode=code;this.code=Chop(Unindent(code));

上面是主要的修改方法，下面说使用方法
最后我喜欢把这些代码写在网站设置管理版权申明那里，比较方便修改，你也可以写在模板里（注意下面的路径根据具体目录更换，最好用绝对路径）

&lt;link type="text/css" rel="stylesheet" href="/zb/highlight/SyntaxHighlighter.css"></link>

&lt;script language="javascript" src="/zb/highlight/shCore.js"></script>
&lt;script language="javascript" src="/zb/highlight/shBrushCSharp.js"></script>
&lt;script language="javascript" src="/zb/highlight/shBrushJScript.js"></script>
&lt;script language="javascript" src="/zb/highlight/shBrushSql.js"></script>
&lt;script language="javascript" src="/zb/highlight/shBrushJava.js"></script>
&lt;script language="javascript" src="/zb/highlight/shBrushXml.js"></script>
&lt;script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = '/zb/highlight/clipboard_new.swf';
dp.SyntaxHighlighter.ClipboardImg = '/zb/highlight/icon_copy.gif';
dp.SyntaxHighlighter.HighlightAll();
}
&lt;/script>

使用方法，在内容中加入：

 &lt;pre class="这里写你代码所用的语言，如js,c#,java"&gt;这里贴代码！注意如果有&lt;BR&gt;记得要用转义（&amp;lt;）&lt;/pre&gt;

打包下载啦，猛击这里：dp.SyntaxHighlighter-zblog@fatkun.rar

]]> http://fatkun.com/2009/09/%e5%9c%a8z-blog%e4%b8%8a%e4%bd%bf%e7%94%a8syntaxhighlighter1-5%ef%bc%88%e4%bb%a3%e7%a0%81%e9%ab%98%e4%ba%ae%ef%bc%8c%e4%b8%8d%e5%a4%8d%e5%88%b6%e8%a1%8c%e5%8f%b7%ef%bc%89%e4%bf%ae%e6%94%b9%e6%96%b9.html/feed 4