在FCKeditor中使用syntaxhighlighter显示高亮代码

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显示高亮代码
https://blog.qingfengju.com/index.asp?id=315

上一篇： 标天汇编语言,C++集成开发环境
下一篇： 模拟鼠标清除托盘无效图标

分类：Web开发 查看次数：9356 发布时间：2013/1/31 19:31:54