查看wiki安装syntax highlite的源代码 wiki安装syntax highlite 0

折腾了一天多，时间超过15小时，终于把这个东东搞定了，这里大概总结一下。

试过了好几个[http://www.webjx.com/javascript/jsajax-14369.html 代码高亮脚本]，但真正认真去分析过的有两个，分别是SyntaxHighlighter和google-code-prettify，下面分别介绍一下。

== SyntaxHighlighter ==

=== 下载 ===

有两个官方下载地址：

http://code.google.com/p/syntaxhighlighter/downloads/list

http://alexgorbatchev.com/SyntaxHighlighter/download/

我下载时用的是前一个网址，这个网址是比较旧的，已经不更新了，所以版本也是比较老的(1.5.1)，当时下载的时候没有注意到。

=== 安装 ===

当时主要参考的有两个地方：

'''＊官网'''： http://code.google.com/p/syntaxhighlighter/wiki/Usage
<pre class="prettyprint">
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</pre>
这里明显是有问题的，因为上面的这些路径都不对，在下载的1.5.1版本中压根就没有"css/"和"js/"这两个文件夹，看了下更新时间，这个使用说明的修改时间是"Feb 4, 2010"，但1.5.1这个版本的发布时间是"Aug 2007"，故有可能是版本不匹配的原因，不过参考意义还是有的。


'''＊博客园的一个帖子'''： http://www.cnblogs.com/surfshark/archive/2011/04/09.html
<pre class="prettyprint">
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>
</pre>
这篇文章就写得很详细了，而且很多细节都写出来了，非常具有参考价值，不过用在jamwiki时，必须更改以下两点：

1、路径的传递方式要更改，否则在wiki生成html时会将"xxx.css"和"xxx.js"均生成"xxx.html"，应改为(文件列表参考了用于html的方法一；url引用写法参考了wiki 原版top.jsp中对url的引用方式)：
<pre class="prettyprint">
<link href="<c:url value="/SyntaxHighlighter/Styles/SyntaxHighlighter.css" />" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shCore.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushCSharp.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushPhp.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushJScript.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushJava.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushVb.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushSql.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushXml.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushDelphi.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushPython.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushRuby.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushCss.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushCpp.js" />"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</script>
</pre>

2、要把对"*.js"的引用放到.html的文件末尾，其余放在文件开头：
<pre class="prettyprint">
<link href="<c:url value="/SyntaxHighlighter/Styles/SyntaxHighlighter.css" />" type="text/css" rel="stylesheet" />
</pre>
放于“WEB-INF/jsp/top.jsp”文件，在"</head>"标签前面，而

<pre class="prettyprint">
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shCore.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushCSharp.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushPhp.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushJScript.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushJava.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushVb.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushSql.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushXml.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushDelphi.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushPython.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushRuby.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushCss.js" />"></script>
<script type="text/javascript" src="<c:url value="/SyntaxHighlighter/Scripts/shBrushCpp.js" />"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</script>
</pre>
则放于“WEB-INF/jsp/close-document.jsp”</body>标签前面。

=== 注意事项 ===

截止到2012/02/25，这个代码高亮的安装仍只取得部分成功：

wiki中只支持<textarea ...>...</textarea>标签，且直接在wiki中查看没有效果，原因是"<textarea>"前面的"<"在生成html时会被wiki转化成"&lt"，这时只有另外存为html，然后手动将"＆lt"改为"<"刷新后才能显示出效果。由于没有学过这一块且短期内也应该不会有时间，原因尚不可知（现在我想要的只是使用而已）。


== google-code-prettify ==

=== 下载 ===

http://code.google.com/p/google-code-prettify/downloads/list
=== 安装 ===

1、将下载的软件包解压，得到一个名为“google-code-prettify”的文件夹，将其中的"src"文件夹拷贝到网站根目录下面，并重命名为“prettify”

2、更改“WEB-INF/jsp/top.jsp”文件，在"</head>"标签前面加上以下javascript(注意根据文件的实际位置更改对应路径)：

<pre class="prettyprint">
        <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="prettify/prettify.js"></script>
        <script type="text/javascript" src="prettify/lang-sql.js"></script>
        <script language="javascript">
        window.onload = function () {
            prettyPrint();
        }
        </script>
</pre>

注：

把以下几句对"*.js"的加载放在“WEB-INF/jsp/close-document.jsp”</body>标签前面也可以：
<pre class="prettyprint">
        <script type="text/javascript" src="prettify/prettify.js"></script>
        <script type="text/javascript" src="prettify/lang-sql.js"></script>
</pre>

个人感觉这样可能会更规范——这是基于这两天从网上获取的信息得出，如：

http://www.cnblogs.com/surfshark/archive/2011/04/09.html

这里对"SyntaxHighlighter"的第一种使用方法，在html中就是分两次加载的；

另外，在这个往jamwiki加入syntax highlite的案例也是如此：


3、刷新网页即可生效

=== 注意事项 ===

目录只有使用
 <pre class="prettyprint">...</pre>
来标记代码；而
<pre>
<code class="prettyprint">...</code>
</pre>
则仍有问题，估计这根jamwiki的css原样式上存在这两个selector有关，具体由于本人也还没有学习css等这些网页相关知识，现在也得不出结论。


== 总结 ==

1、SyntaxHighlighter安装时是不是不应该过多参考html的使用方法？

——当时只有通过对比生成的html代码找出问题。。但完全有可能陷入误区（即找到一条小道甚至是死路，就忘记找大道了）

2、基础知识太少了，无论是对jamwiki还是对syntax highlite，均是一无所知，两者的结构都是通过这个事情才有一点了解，包括：

*wiki页面是由top.jsp和close_document.jsp等组成的，前一个包含标签"<html和<body>"，后一个包含标签"</body>和</html>"

*syntax highlite的配置使用，onload函数等等

3、在本地配了一个jamwiki作为sandbox，大大提高了验证效率，并减小正式网站的垃圾量，这一点做得很好

4、事情研究的基本步骤：

*先在google上搜索"jamwiki syntax highlight"，进而找到有且仅有的两篇相关帖子，虽然写得很简略，照着做也做不出来效果，但起码知道了jamwiki的一些结构，以及相关js应该加在jamwiki的哪些文件上；

*通过对wiki生成的html与能正常显示代码高亮的html进行对比分析，从而基本确定了问题点；

*在发现jamwiki的css和SyntaxHighlighter的css selector合作不佳后，尝试了google-code-prettify，而有了前面的经验，尤其是对url的更改，使这个相对来说很快出来了效果。

<br>
== 参考资料 ==

http://www.codeweblog.com/arch-05-09-plus-months-to-jamwiki-with-syntax-highlighting-syntaxhighlighter-fckeditor/

https://youtubeproxy.org/default.aspx?prx=http://sinnerinc22.blogspot.com/2010/07/adding-syntax-highlighter-to-jamwiki.html

http://code.google.com/p/gwtwiki/wiki/JAMWikiIntegration

http://www.cnblogs.com/surfshark/archive/2011/04/09.html

http://wayjam.me/google-code-prettify.html