1.SyntaxHighlighter简介

SyntaxHighlighter是一个用于Web的语法高亮插件,目前的版本是3.0.83(2013年01月31日),项目网站:
http://code.google.com/p/syntaxhighlighter/
http://alexgorbatchev.com/SyntaxHighlighter/

不少网站都在使用此插件显示代码,比如:
http://www.cnblogs.com/
http://www.oschina.net/

2.在FCKeditor中使用SyntaxHighlighter

FCKeditor\fckconfig.js
在55行附近添加:

FCKConfig.Plugins.Add( 'syntaxhighlighter' ) ;

在112行附近的FCKConfig.ToolbarSets["Default"]集合中添加:

'SyntaxHighLighter'

FCKeditor\editor\fckeditor.html
在177行附近,修改FCK_InternalCSS变量,增加:

pre{border-style: solid; border-color:#336699; 
    border-width: 1px; padding: 5px; 
    background-color: #f0f0f0;
    font-family:Consolas,Courier New ;font-size:10pt}

FCKeditor\editor\lang\zh-cn.js
在33行附近增加:

SyntaxHighLighterBtn:"用SyntaxHighLighter组件插入高亮代码",

FCKeditor\editor\skins\office2003\fck_strip.gif
在末尾增加一个自己喜欢的小图标。[见附件]

在FCKeditor\editor\plugins目录下增加syntaxhighlighter目录,编写:
fckplugin.js [见附件]
fck_syntaxhighlighter.html  [见附件]

3.在前台页面高亮显示代码
在header加入:

<link type="text/css" rel="stylesheet" 
      href="syntaxhighlighter_3.0.83/styles/shCoreQingFengJu.css"/>

在footer加入:

<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js">
</script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushAppleScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushAS3.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushBash.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushColdFusion.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushCpp.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushCSharp.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushCss.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushDelphi.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushDiff.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushErlang.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushGroovy.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushJava.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushJavaFX.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushPerl.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushPhp.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushPlain.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushPython.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushRuby.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushSass.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushScala.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushSql.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushVb.js"> </script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushXml.js"> </script>
<!-- 这里可根据自己网站需要支持的语言,酌情添加,太多了浪费带宽 -->

<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

备注,本文使用的测试环境:FCKeditor version 2.6.3 Build 19836
双击代码区域可以复制代码。
 


本文链接地址: 在FCKeditor中使用syntaxhighlighter显示高亮代码
http://qingfengju.com/index.asp?id=315

分类:Web开发 查看次数:4659 发布时间:2013-1-31 19:31:54