Wiki安装syntax highlite

来自个人维基
2015年7月15日 (三) 04:42Hovercool讨论 | 贡献的版本

(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至: 导航搜索

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

试过了好几个代码高亮脚本,但真正认真去分析过的有两个,分别是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

<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>

这里明显是有问题的,因为上面的这些路径都不对,在下载的1.5.1版本中压根就没有"css/"和"js/"这两个文件夹,看了下更新时间,这个使用说明的修改时间是"Feb 4, 2010",但1.5.1这个版本的发布时间是"Aug 2007",故有可能是版本不匹配的原因,不过参考意义还是有的。


*博客园的一个帖子http://www.cnblogs.com/surfshark/archive/2011/04/09.html

<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>

这篇文章就写得很详细了,而且很多细节都写出来了,非常具有参考价值,不过用在jamwiki时,必须更改以下两点:

1、路径的传递方式要更改,否则在wiki生成html时会将"xxx.css"和"xxx.js"均生成"xxx.html",应改为(文件列表参考了用于html的方法一;url引用写法参考了wiki 原版top.jsp中对url的引用方式):

<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>

2、要把对"*.js"的引用放到.html的文件末尾,其余放在文件开头:

<link href="<c:url value="/SyntaxHighlighter/Styles/SyntaxHighlighter.css" />" type="text/css" rel="stylesheet" />

放于“WEB-INF/jsp/top.jsp”文件,在"</head>"标签前面,而

<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>

则放于“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(注意根据文件的实际位置更改对应路径):

        <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>

注:

把以下几句对"*.js"的加载放在“WEB-INF/jsp/close-document.jsp”</body>标签前面也可以:

        <script type="text/javascript" src="prettify/prettify.js"></script>
        <script type="text/javascript" src="prettify/lang-sql.js"></script>

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

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

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

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


3、刷新网页即可生效

注意事项

目录只有使用

<pre class="prettyprint">...</pre>

来标记代码;而

<code class="prettyprint">...</code>

则仍有问题,估计这根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的更改,使这个相对来说很快出来了效果。


参考资料

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