给Drupal打造近乎完美的在线所见即所得编辑器
一款好用的在线文本编辑器一直是博客作者，网文作者梦寐以求的创作工具，随着
javascript技术的改进和各种文本编辑器的开发和升级，在线文本编辑器也逐渐的成熟和易用起来，本文将以现在较为流行的文本编辑器
ckeditor和drupal模块来介绍在drupal网站上配置一款近乎完美的所见即所得的文字编辑和排版环境。
需要的模块和第三方软件
首先介绍一下配置需要的模块和第三方的开源软件。使用的drupal模块, ,
, , , , 使用的第三方的软件主要就是和。
wysiwyg模块和CKEditor的安装与配置
首先安装并且启用wysiwyg，wysiwyg就是所见即所得(What You See Is What You
Get)的简称。wysiwyg模块提供了众多和其他所见即所得编辑器的集成接口。已经默认支持了CKEditor, FCKeditor,
jWysiwyg, markItUp, NicEdit, openWYSIWYG, TinyMCE, Whizzywig,
WYMeditor, YUI editor
这些流行的编辑器，而且现在很多drupal的使用者和模块开发者也有意向支持这个统一的接口，所以本文就没有采用其他专门支持一种编辑器的模块来配置。打开wysiwyg配置界面，在下面的安装说明处“Installation
instructions”可以看到wysiwyg对编辑器的支持情况。
默认的wysiwyg模块是不带任何编辑器的，本文由于是配置之后补写，所以这里的状态已经安装了Ckeditor。好让我们为wysiwyg安装
Ckeditor。进入到你的站点的sites/all目录下，创建libraries目录，从网上下载ckeditor最新版并且解压缩。
cd sites/all/
mkdir libraries
cd libraries/
wget http:///CKEditor/CKEditor/CKEditor%203.2.1/ckeditor_3.2.1.tar.gz
tar zxvf ckeditor_3.2.1.tar.gz
rm ckeditor_3.2.1.tar.gz
正确下载并且解压后，libraries目录里面会多一个ckeditor目录，所有的ckeditor文件都在这个目录下，我们可以删除下载的
ckeditor_3.2.1.tar.gz这个压缩包了。
刷新你的wysiwyg配置页面，你会看到ckeditor已经被wysiwyg识别并且安装了。就像上面图片显示的一个对号，后面显示已经安装
ckeditor的版本号。 接下来需要配置在哪个输入格式使用ckeditor，选择上面的Filtered
HTML输入格式配置ckeditor编辑器，并且点击下面的保存按钮。
让我们把ckeditor的界面修改为中文显示，点击编辑按钮在基础设置那里，选择语言，在下拉项中设置为zh-cn。这样ckeditor就会使用中文显示界面了。
经过这样简单的配置之后，你用filtered
HTML这个输入格式创建一个node，就可以看到ckeditor已经被加载到页面上，你已经可以用它来编辑文档了。但是有一个不方便的地方就是你在文章中插入图片的时候，必须先上传图片到网络上，才能在ckeditor里面排版，能不能在ckeditor里面上传图片呢？当然可以。我们继续为
ckeditor增加图片上传功能。
配置wysiwyg CKEditor IMCE上传图片
IMCE模块安装与配置
我们下载和启用drupal的IMCE模块，IMCE模块是基于javascript的应用，
是一个通用的文档管理模块，它可以方便的浏览，上传，删除服务器上的图片并且可以创建缩略图。IMCE是一个功能强大而且非常成熟的模块，很早就已经支持
cck，也是使用最多的drupal模块之一，这里就不再做更多介绍。接下来简单的对IMCE进行配置，首先建立一个名为blog的配置文件，并且让注册用户默认使用blog配置文件。
并且在这个blog的配置里面设置每个用户的默认图片管理目录，我们使用u(uid)作为目录名称，用户1的目录就为u1，2的目录就是u2。配置的方法如下图所示。这样用户打开IMCE的图片管理界面时，默认就会进入到他自己的目录里面。
IMCE与CKEditor整合
对 IMCE进行简单的配置后，我们要把ckeditor和IMCE这两个功能整合起来，我们安装和启用IMCE Wysiwyg
bridge 这个模块，这个模块已经做了整合，启用后，我们再次回到wysiwyg的配置页面，选择编辑Filter
HTML的ckeditor的配置，在中间Buttons &
Plugins的位置，可以看到多了一个IMCE的plugin。让我们选择这个plugin来启用它，并且找到Image这个button，也启用它。
保存之后，ckeditor的图片属性编辑界面中就增加了图片浏览和上传的功能。在你看到它们之前你需要清理一下drupal的缓存，甚至于你本地浏览器的缓存，确保你本地的ckeditor的js文件得到了更新。
点击这个按钮，就会打开IMCE的图片管理界面，上面有上传，删除，resize，缩略图，另外还多了一项“Send to
ckeditor”。对就是这个，上传完图片选择一个图片后，点击这个链接，就可以把图片加入到ckeditor的图片编辑界面了，当然直接点击下面的图片预览也可以的。Ckeditor加入IMCE的图片管理功能，确实变得方便了很多。
动动手，在CKEditor上传个图片并且排版
接下来请读者创建一个文章，并且上传一个图片，在ckeditor里面设置它的居右显示，
然后保存这篇文章。你会发现你的图片仍然是靠左显示的，如果你无法看到图片，那是因为你的Filtered
HTML输入格式里面没有加入显示img。你可以手动加入，在站点配置-&输入格式-&Filtered
HTML那里。
使图片标记img和div标记可以显示。
好，虽然我们加入了img的显示，但是图片仍然不能够居右显示。下面我来解释一下原因，其实问题就在HTML过滤器上，HTML过滤器是drupal核心自带的过滤器，出于安全上面的考虑HTML过滤器会过滤并且删除HTML标记里面的style等属性，如果非要图片支持style等css标记，那么必须将
HTML过滤器停用，但是这样会给网站带来很大的安全隐患，因为不对用户提交的网页内容过滤，有可能不法用户会在网页里面挂入木马、病毒等有害内容，破坏网站和网站读者。为了让我们的网站更加安全，我们需要更多的配置来确保我们的编辑器的安全性，同时也要提供足够的强大的在线编辑功能来满足我们的网络作者。
定制WYSIWYG Filter，让排版随心所欲
WYSIWYG Filter简介
接下来我们安装启用WYSIWYG Filter这个模块，WYSIWYG
Filter是专门为wysiwyg设计的一款网页代码过滤器，相较于HTML过滤器，它提供了强大的过滤功能和更加灵活的配置，能够对HTML标记，标记属性，标记值的有效性，自定义标记名称css类等进行严密的控制。WYSIWYG
Filter会从你的网页中过滤掉任何不符合规则的内容，所以在配置WYSIWYG Filter的时候你要多注意尽量避免错误。
过滤网页显示的内容
接下来我们继续配置Filtered HTML这个输入格式，
我们停止HTML过滤器，启用WYSIWYG
Filter，并且为了避免冲突，我们也停止了换行转换器。
然后在设置那里对WYSIWYG Filter进行更加详细的配置，首先我对HTML elements and
attributes进行了调整，加入了img对图片的支持，同时对img允许的属性也进行了配置，如src、style、width、height、
title、alt，另外还对div标记加入了class和style属性，确保div可以用来配置css。由于这些配置在不同的网站上是不尽相同的，和你使用的drupal的模板有关系，所以我这里不一一讲述。下面是我的配置代码：
a[!href|target&_blank|title],
div[align&center?justify?left?right|class|style],
p[align&center?justify?left?right],
br,span[style],em,strong,cite,code,blockquote,ul,ol,li[style],dl,dt,dd,
img[src|style|width|height|title|alt],
pre[class|style],table[class|style],tbody,tr[class],td[style]
大家需要注意的是没一行的配置结束要加上一个逗号，不然配置就不能正确解析。我说过配置的不正确会导致你网页内容的不显示，所以大家一定要小心。配置项中
“!”开头的是必须值，每个属性之间用“|”来间隔，除了必须项外，其他都是可选属性，属性的值以“&”为开头标记，不同的属性值之间以“?”间隔。如果你配置了属性值，但是你的网页里面的值不在有效配置里面，那么你的这个属性就不会显示，所以说WYSIWYG
Filter的过滤控制非常严格而且灵活。
配置内嵌样式Style
接下来我们要对style这个内嵌的css属性编辑项进行更加详细的设置，
Filter提供了一个列表来供我们选择都支持那些配置，我们需要按需要进行选择，比如要让图片能够居右显示，那么你至少要选择float这个配置项。
好了，保存配置，重新刷新一下你刚才编辑的那个带有图片的文章，看到了吧，现在图片已经可以靠右显示了。因为我们的WYSIWYG
Filter中启用了img的支持，img里面可以设置内嵌的style样式，并且我们还配置了style样式里面支持float这个属性。从这个配置的例子可以看出，如果你为你的网络作者提供更加灵活的页面排版方式，那么你就需要仔细配置WYSIWYG
Filter让这些配置能够生效并且正常显示。
至此我们的在线编辑器对普通文档的编排已经拥有了十分强大和灵活的功能了，但是对网络上面数量众多的代码、脚本和命令能够完美编辑和显示吗？目前还不可以，让我们来继续完善它。
让代码语法高亮显示
安装GeSHi Filter
安装和启用GeSHi Filter for syntax
highlighting这个模块，在启动了这个模块后，我们仍然需要手动下载这个第三方的代码库来实现代码语法高亮显示的功能。注意我们下载的是1.0.x版本。
cd sites/all/modules/geshifilter/
wget http://sourceforge.net/projects/geshi/files/geshi/GeSHi%201.0.8.6/geshi-1.0.8.6.tar.gz/download
tar zxvf geshi-1.0.8.6.tar.gz
为代码加上行号
接下来我们修改下GeShi Filter的默认配置，首先加入行号的显示，然后启用Geshi对代码中的关键字加上链接。
然后选择我们网站支持那些种类代码的高亮显示，我选择了php, html, xml等，你可以根据自己的需要进行配置。
正确配置代码的标记可以使用Geshi
filter自带的code或者blockcode。语言的区分用type、lang和language都可以。例如：
[code type="php"]your php code here...[/code]
之后，我们修改输入格式配置，在Filtered HTML这个格式中我们启用Geshi
filter并且将它的优先级移到第一位。
为代码加上色彩
这样配置后，GeSHi filter就已经可以处理位于code标记里面的代码了。但是显示的仍然不正常，原因在于WYSIWYG
Filter的配置项没有包含GeSHi filter添加的css样式标记，并且将GeSHi
filter生成的部分标记误删除。让我们把这些被删除的标记加上，根据不同配置标记也不相同，如果你不能确定，可以试着就使用我上面的配置代码。另外还要将GeSHi
filter的css类名标记也加上。配置如下图(就在WYSIWYG Filter Style
properties配置的下面，找不到？
经过以上的配置之后，各种代码语法高亮的显示就应该正常了。你可以试着在你的文章里面嵌入一段代码，由于CKEditor本身不支持GeShi的高亮显示，因此在它的界面上没有相应的按钮，你需要点击原始码，以代码的形式插入。
保存你的文档，显示一下，看看结果是不是代码已经按照你指定的语法高亮显示了？应该和这个差不多哦：
复制代码时去掉行号
显示的问题解决了，有没有想过复制Ctrl-c、Ctrl-v也会有问题呢？在firefox等这些以gecko为引擎开发的浏览器上，复制时会连同行号一起复制过来。这样就给读者带来了很大的不便，一切为了读者考虑，我们继续来修正GeShi-filter的配置从根本上解决它，打开GeSHi-
filter配置页面，将代码显示模式修改为 GESHI_HEADER_PRE_TABLE
保存后就可以了。GESHI_HEADER_PRE_TABLE将代码和行号使用表格将它们分在了两个不同的单元格里面，复制的时候就不会再有问题了。
编写模块个性化CKEditor
为什么要编写模块自定义CKEditor的配置
很多的编辑器都有自定义的功能，他们大多会提供一个js文件，让你通过编辑这个文件，达到自己配置编辑器的目的。Ckeditor也在自己的主目录中提供了一个叫做config.js的文件，在这个文件中，你可以定义Ckeditor的各种属性。不过在以wysiwyg模块集成的环境中，这个
config.js文件里面的所有配置都无效了，原因在于wysiwyg打算将配置可视化，希望用户可以通过它提供的配置界面GUI来达到配置所有编辑器的目的。但是以现在wysiwyg版本所提供的配置功能还远远达不到对每个编辑器的数百个属性逐一进行配置的程度。所以wysiwyg的开发人员在
6.x-2.1版本中引入了一个hook_wysiwyg_editor_config_alter方法，通过hook这个方法，让其他开发者可以对指定的编辑器进行配置。仅仅为了几个个性化的编辑器设置将以前只需在js中写几行代码就可以办到的事情搞的复杂起来，要编写模块才行，这么做有什么好处呢？其实还是有好处的，首先通过编写模块来配置，这样你就不需要修改编辑器目录中的任何文件，对升级是很有利的，你可以毫不犹豫的将旧版编辑器整个目录删除，再下载新版。另外编写的模块也独立于wysiwyg这个模块，所以当wysiwyg需要升级时，也可以直接删除wysiwyg目录。因此，编写一次模块，对今后的升级维护带来了很大的便利，我个人还是很赞同这种个性化的方式的。
编写模块修正CKEditor的中文界面
我们来编写一个简单的配置模块来修正一下CKEditor的界面显示，让它能够正常显示中文。首先是写info文件，
name = Ckedito custom setting
description = Adds my custom setting to CKeditor via Wysiwyg module.
package = User interface
core = 6.x
dependencies[] = wysiwyg
然后编写module文件。
ckeditor_custom.module
& function ckeditor_custom_wysiwyg_editor_settings_alter(&$settings, &$context) {
& & if ($context['profile']-&editor == 'ckeditor') {
& & & $settings['uiColor'] = '#9AB8F3';
& & & $settings['language'] = 'zh-cn';
在这个模块中，我们仅仅对另个设置进行了修改，一个是CkEditor的语言配置，设置成为中文，另外我们修改了一下CkEditor的背景色。这个模块很简单，不过你可以按照这个方法添加自己的设置。
编写CKEditor Plugin扩充编辑器功能
CKEditor有其自己的插件机制，允许开发人员编写插件来扩展功能，同样wysiwyg也提供了实现编辑器插件功能的接口，不同的是你仍然需要编写模块来实现wysiwyg的接口，在你的模块中加载js文件来实现插件功能。
Teaser break插件浅析
利用插件修改编辑器设置
我们上面介绍过通过编写自定义模块实现wysiwyg的一个alter
hook方法来设置编辑器，但是那个方法只能设置一些简单的类型，对于复杂的类型无能无力。但是我们仍然可以通过wysiwyg的插件接口来设置编辑器。原因在于插件其实核心是一个js文件，这样就避免了通过Drupal核心转换PHP变量到JS变量的过程，可以在这个文件中直接设置复杂的JS类型，比如我们下面配置的正则表达式。有的朋友可能会问既然我们编写了模块进行配置，为什么不能在我们的模块中直接加js文件来设置复杂的JS数据类型呢？这里涉及到一个js调用先后的问题，如果在自定义的模块中加入js进行配置，那么Drupal在生成页面的时候所有的js文件都会加载，你很难保证你的js文件能够在CKEditor和wysiwyg的js文件之后执行。这样你的设置就是没有效果的，而把设置代码放到wysiwyg的plugin接口中，就能保证你的设置代码是在CKEditor和wysiwyg初始化之后调用的，这样你的设置就会生效。
设置代码保护功能避免CKEditor修改GeShi标记中的内容
我们这里就来设置一下CKEditor的一个配置项CKEDITOR.config.protectedSource，protectedSource是用来保护代码不会被修改，它是用正则表达式数组来设置的，所有正则表达式所匹配的内容将被保护，在用CKEditor进行编辑的过程中，CKEditor不会改动保护的内容。这个功能可以有效的保证我们用GeSHi标记的代码段不被CKEditor修改，如果不保护起来，之间的一些特殊字符和一些换行标记都会被CKEditor修改或者删除，导致代码段的格式面目全非。我们把保护设置附加到plugin的js的文件末尾。
CKEDITOR.config.protectedSource.push( /&\?[\s\S]*?\?&/g ); & // PHP Code
//CKEDITOR.config.protectedSource.push( /&%[\s\S]*?%&/g ); & // ASP Code
//CKEDITOR.config.protectedSource.push( /(]+&[\s|\S]*?&\/asp:[^\&]+&)|(]+\/&)/gi ); & // ASP.Net Code
//CKEDITOR.config.protectedSource.push( /&code[\s\S]*?&\/code&/g ); &// GeshiFilter & code &
CKEDITOR.config.protectedSource.push(/\[code[\s\S]*?\[\/code\]/g ); &// GeshiFilter [ code ]
//CKEDITOR.config.protectedSource.push( /&blockcode[\s\S]*?&\/blockcode&/g ); &// GeshiFilter & blockcode &
//CKEDITOR.config.protectedSource.push( /\[blockcode[\s\S]*?\[\/blockcode\]/g ); &// GeshiFilter [ blockcode ]
//CKEDITOR.config.protectedSource.push( /&pre\ .*?&\/pre&/g ); & &// wysiwyg-geshi
这样在CKEditor编辑的时候就可以在源码模式和可视编辑模式下面自由切换不必担心你设置的代码段会被改动了。
由于wysiwyg的设计缺陷，目前CKEditor中文配置设置后无效果，可以通过编写模块自定义CKEditor配置来解决。
因为将代码和行号分在不同单元格里面，当有的字体粗体和普通模式显示高度不一致时，会造成行号和代码的错位。代码中不少关键字是粗体显示，而行号都是普通字体，代码行会比行号略高一些，代码较多时，错位会增强，甚至错行。在IE中遇到。
由于Drupal核心的限制详情见drupal_to_js，目前wysiwyg提供的这个alter方法只能对一些具有简单类型值的配置项进行设置，包括整形，布尔型，简单的字符串等。对于像用PHP字符串编写的js方法，js对象，正则表达式等无法支持。
break插件启用后，会意外修改被保护的代码。需要打个补丁来修正。 补丁下载地址
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。我在iPhone4S上的SSH中的VIM编辑器不显示语法高亮。。_百度知道
按默认排序
hitest：;colortest:runtime syntax&#47。执行。执行：.vim可以看到你的语法配色:runtime syntax&#47，很可能是配色或者终端色彩支持的问题如 acrofox 据说.vim这个命令可以看到你终端显示颜色是否正常
看你这样子怎么感觉已经有语法语亮，只是加亮的方案有问题呢。用 :syntax off 关闭语法加亮，看看有没有变化。
不行。就连下划线都没有了。。一般vim是显颜色的。
自然是不行的，只是看看有没有变化。下划线没有了，说明这里才是真的关闭了语法显示，之前是开着的，只是颜色方案的问题。可能是ssh终端不支持丰富的颜色。用 :hi 命令可以看看颜色配置。
其他类似问题
语法高亮的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁#极氪# 仅一行代码，打造一个在线编辑器 | 36氪
在大部分人眼里，技术宅给人的印象是沉默寡言，总摸不透他心里想些什么，彼此都保持距离。作为半个程序员，我觉得真正的技术宅大部分时间都在找乐子，鼓捣各种想法，和大部分人的极客心理是一样的，程序员也还爱讲笑话，也喜欢烧菜做饭，虽然大多是为了减减压，这样看来和常人没什么不一样。
不一样的地方，技术宅崇尚极致，喜欢极简，又希望简约不简单，背后就是技术宅满心思的不断的尝试，我正在看着一出好戏在上演：
&程序员 Jose Jesus Perez Aguinaga 在
分享了一个小技巧：在浏览器地址栏中输入一行代码：data:text/html, &html contenteditable& ，回车即可把浏览器变临时编辑器（需要浏览器支持 HTML5 属性
contenteditable）。不少程序员受 Jose 的启发，开始对这行代码，比如改成支持 Ruby 语法高亮的……&
从引子中可以看到，本来只是简短的小段代码： data:text/html, &html contenteditable&，经过程序员们不断改造，从一个简单的可编辑页面，逐步变成了包括支持 Java、Ruby、Python 等多种 编程语言高亮的代码编辑器，截至不到 1 个小时的最后更新，我已经看到了一个和
网站功能相近，使用了第三方网站数据库 API 服务存储内容的
data:text/html,
&style type=&text/css&&
font-size:16
&div id=&e&&&/div&
&script src=&http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js&&&/script&
&script src=&/jquery-1.9.0.min.js&&&/script&
var myKey=&SecretKeyz&;
$(document).ready(function(){
var e = ace.edit(&e&);
var url = &http://api.openkeyval.org/&+myK
dataType: &jsonp&,
success: function(data){
e.setTheme(&ace/theme/tomorrow_night_eighties&);
e.getSession().setMode(&ace/mode/markdown&);
e.setValue(data);
$(&#e&).on(&keydown&, function (b) {
if (b.ctrlKey && 83 == b.which) {
b.preventDefault();
var data = myKey+&=&+encodeURIComponent(e.getValue());
data: data,
url: &http://api.openkeyval.org/store/&,
dataType: &jsonp&,
success: function(data){
alert(&Saved.&);
将以上代码完整复制，粘贴到 Chrome 或者 Firefox，Safari 浏览器地址栏中（不支持低版本 IE 浏览器），回车打开，稍等片刻一个支持 CTRL + S
保存内容的在线编辑器呈现眼前。
仅一行代码，实现功能相当于系统的记事本程序，感慨技术宅的艺术造诣吧？～
Update: 感谢 @问题青年a 提供 CoderWall 分享原文。原创文章，作者：新知打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮职位精选无需注册，直接使用社交账号登录登录没有帐号？
a.login__register-btn href="javascript:void(0)" 注册已有帐号？
a.register__login-btn href="javascript:void(0)" 登录注册右键另存为下载到本地分享到微博当前访客身份：游客 [
当前位置：
15 款代码语法高亮工具，美化你的代码
语法高亮是文本编辑器用来显示文本的，特别是源代码，根据不同的类别来用不同的颜色和字体显示。这个功能有助于编写结构化的语言，比如编程语言，标记语言，这些语言的语法错误显示是有区别的。语法高亮并不会影响文本自身的意义，而且能很好的符合人们的阅读习惯。语法高亮同时也能帮助开发者很快的找到他们程序中的错误。例如，大部分编辑器会用不同的颜色突出字符串常量。所以，非常容易发现是否遗漏了分隔符，因为相对于其他文本颜色不同。现 在有各种各样的语法高亮工具，可以格式化语言，并且根据不同的编程语言进行高亮显示。无论是个 HTML 页面还是 PHP，Ruby，Python 或者是 ASP。这篇文章中，我们会介绍 15 款最好的代码语法高亮工具，帮助大家用更迷人的方式展示代码片段。Enjoy！Prism 是一个轻量级，可扩展的语法着色工具，符合 Web 标准。它压缩后只有 1.5KB，并且非常易于使用，只需要插入一个 CSS 和 JS 文件即可。
GeSHi(Generic Syntax Highlighter)用于在HTML页面中高亮显示各种源代码。支持超过60种语言：PHP、HTML、C、Java、Java5、C#、 Actionscript、Delphi、C++、Groovy、Javascript、Perl、PL/SQL、Ruby、Python、SQL、 XML等，并易于集成到 ，，， 和
等系统中使用。
Rainbow 是一个对代码进行语法着色的轻量级 JavaScript 库，只有 1.4kb 大小。易用、可扩展、完全通过 CSS 进行样式显示。完全支持 CSS 主题定制颜色和字体。
Highlight.js 是一个用于在任何web页面上着色显示各种示例源代码语法的JS项目。支持 26 种代码格式化风格，54 种语言： – 1C, AVR Assembler, Apache, Axapta, Bash, C#, C++, CSS, DOS .bat, Delphi, Django, HTML, XML, Ini, Java, Javascript, Lisp, MEL (Maya Embedded Language), PHP, Perl, Python, Python profile, RenderMan (RIB, RSL), Ruby, SQL, Smalltalk, VBScript, 其他更多。
这是款在线代码高亮工具，提供多种编程语言的高亮，用户可以通过几个选项来进行不同类别的代码高亮。
这 是款 JavaScript 模块和 CSS 文件，允许在一个 HTML 文件中进行源代码的语法高亮。它支持代码中的嵌入式链接，行号等等。它的应用非常广泛，支持跨浏览器。得到&
的一致认可。
Snippet 是个 jQuery 语法高亮插件，在 SHJS 脚本中构建。Snippet 提供一个快速简单的方式来进行 HTML 文档的代码高亮。它原生支持 15 中流行语言，支持 39 种独特的语法高亮风格模式。
CodePress 是个基于 web 的源代码编辑器，当在浏览器中编写 JavaScriptis 代码的时候能实时的进行代码高亮。
JavaScript Syntax Highlighter 是个客户端代码高亮工具，支持的语言有：HTML, CSS, JavaScript, PHP, SQL, HTTP 和SMTP 协议， php.ini 和 Apache 配置，支持所有主流的浏览器： Internet Explorer, Firefox, Opera and Google Chrome。JUSH 同时也是个 jQuery 和 WordPress 插件。
Chili 是个 jQuery 代码高亮插件，可以快速的进行代码高亮，设置非常简单，完全自定义，而且有着完整的文档。此 插件支持的语言有： C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, XHTM；支持的浏览器有：& Internet Explorer, Firefox, Opera 和 Safari。
Pygments 是个通用代码语法高亮工具，许多常用的软件都使用了这款工具，比如论坛系统，wikis 或者其他需要美化代码的应用。 Pygments 支持范围非常广泛的编程语言，和大量的输出格式，包括 HTML, RTF, LaTeX 和 ANSI 序列。
Ultraviolet 是个基于
的代码语法高亮引擎。自从使用了
语法高亮文件，就能支持超过 50 中语言的语法高亮显示和 20 种不同的主题，而且是开箱即用哦。
Lighter 是一款免费的MooTools代码高亮插件。使用lighter.js简单到只需要在你的页面中添加一段简单的脚本就OK了。
这是个 jQuery 语法高亮插件，使用 Alex Gorbatchev 的 SyntaxHighlighter，但是这个插件兼容 xhtml 语法。
SyntaxHighlighter 是个功能齐全的独立代码语法高亮工具，使用 JavaScript 编写。目前已经得到了 Apache, Aptana, Mozilla, Yahoo, Wordpress, Bug Labs, Freshbooks 的一致认可，并且都在使用。SyntaxHighlighter 允许在 web 页面插入彩色代码片段，不需要依赖任何服务器端脚本。
想通过手机客户端（支持 Android、iPhone 和 Windows Phone）访问开源中国：
旧一篇： 1年前
新一篇： 1年前
你也许会喜欢
osc 用的就是
2楼：pqiankui
好东西，支持下！已收藏哦
3楼：魏武帝
都是js的。
用的Geshi 不错
我用的是自己在Google Code Prettify 之上封装的
6楼：你若安好
这个好 果断收藏
7楼：杨松坤
学习学习qq
我还是觉得sublime中的xcode好用
9楼：caoglish
没有code mirror，不全呀
10楼：哆啦比猫 来自
vim 直接 tohtml 效果最好了
11楼：mr_cheney 来自
美化代码？貌似这个要keep the code to clean 吧
与内容无关的评论将被删除，严重者禁用帐号
本周热点资讯
本站最新资讯}