代码高亮

日期：2012-4-2 来源： GBin1.com 语法高亮javascript类库非常多，我们在以前文章 Codemirror - javascript开发的代码语法高亮显示引擎 也介绍过。大多数的代码库都非常工作。今天我们介绍一个非常轻量级的代码库解决方案 - Rainbow 。这个类库只有1.4kb大小，非常容易扩展，功能不错。其它类似类库还有： Google Code Prettify 。 原文来自： 轻量级的Javascript代码语法高亮类库 - Rainbow 来源： oschina 链接： https://my.oschina.net/u/156697/blog/52373

WordPress代码高亮插件有很多，如WP-CodeBox 、WP-Syntax。但使用 Windows Live Writer (简称 WLW )发布含有代码的文章，代码都会被转义，需要进入WordPress后台的Html模式下重新编辑代码，很是麻烦。搜索得知，要防止转义，可以添加 escaped="true" 属性，经过测试，发现 WP-CodeBox 插件不支持 escaped="true" 属性，但WP-Syntax就支持。 由于 WP-CodeBox 使用的是<pre />容器，所以也最好找个同样使用<pre />容器的插件，最后选择了 WP-Syntax 代码高亮插件，WP-Syntax 和 WP-CodeBox 都是基于GeSHi支持的语言的语法，使用方法基本一样，最重要的是 WP-Syntax 支持 escaped="true" 属性。 更多相关： PHP教程 WP-Syntax 代码书写格式 <pre lang="html" line="1" escaped="true"> //这里添加代码…… </pre> 其中，lang="html"表示代码语言为html，请根据自己需要修改； line="1" 表示显示行号，如果不需要，去掉即可；escaped="true" 是为了防止代码转义，如果不需要，去掉即可。 注意：在wordpress后台使用 WP-Syntax

目前kindeditor已经升级到了4.1.2版本，其中4.0以上版本已经加入了代码高亮功能，所以决定把系统中kindeditor从3.x升级到最新的4.1.2， 不过官方对于代码高亮功能，并未给予太多的说明，还需要自己做一些摸索，好在kindeditor的用户还是比较多的，相对资料也比较多。 对于kindeditor升级，官方给了一个说明文档，相对还是比较详细的： http://www.kindsoft.net/docs/upgrade.html 首先在kindeditor官网下载最新4.1.2版本的插件包： http://kindeditor.googlecode.com/files/kindeditor-4.1.2.zip 下载完毕后进行解压，目录中： asp、jsp、php：这几个目录主要放着对应语言的示例程序 那么我们需要的主要是：lang、plugins、themes这几个文件夹，分别对应着是：语言包、插件包、主题样式 将这三个包，复制放到我们项目里去。 1.在要显示kindeditor的页面引入下面文件 <script charset="utf-8" src="/ke4/kindeditor.js"></script> <script charset="utf-8" src="/ke4/lang/zh_CN.js"></script> 2.然后加入初始化代码

kindeditor4.x代码高亮功能默认使用的是prettify插件，prettify是Google提供的一款源代码语法高亮着色器，它提供一种简单的形式来着色HTML页面上的程序代码，不过因为SyntaxHighlighter的应用非常广泛，所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件。 1.第一步首先修改kindeditor代码高亮写入pre标签时的class类名： 打开/kindeditor4/plugins/code/code.js，找到类似于这样一行： html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code)'</pre>'; 改为以下的内容： //html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) +'</pre>'; //将代码高亮替换为SyntaxHighlighter插件需要的类名 html = '<pre class="brush:' + type + ';">\n' + K.escape(code) +'</pre>'; //此处为将原有写法注释，上一行为修改后的内容。 2.自定义页面中kindeditor中选择“插入代码”的图标，下拉菜单中的语言选择项：

首先需要在页面中引入所需FE文件： 两个js和一个css文件是必须要引用的文件； shCore.js是syntaxhighlighter插件的基础代码； shAutoloader.js作用 是 syntaxhighlighter插件的代码高亮显示时自动加载所需文件；但是如果目录不正确的话，就会加载失败，解决方法如下SyntaxHighlighter.autoloader.apply()中给出js文件的位置， <?php //syntaxhighlighter代码高亮显示需要加载的js/css====================begin Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . "/js/syntaxhighlighter/styles/shCoreDefault.css"); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shCore.js'); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts