为SyntaxHighlighter添加新语言的方法

所属分类: 网络编程 / 网页编辑器 阅读数: 499
收藏 0 赞 0 分享
因为经常要在博客里贴一些Lua代码,但是所使用的SyntaxHighlighter插件默认不支持Lua语言,所以去研究了一下如何为SyntaxHighlighter添加并激活一个新的语言,这里将过程和有同样需求的童鞋分享。(因为我添加的是Lua语言,下面的过程描述会以Lua为例,在添加你所需要的语言时,你只要将相应的项更换为你的自定义设置即可)

1. 从这篇博客里寻找所需要的语言:http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/
2. 下载对应的shBrushXXX.js脚本,比如我下载的是shBrushLua.js,它看起来像这样:


复制代码 代码如下:

SyntaxHighlighter.brushes.Lua = function()
{
 var keywords = 'break do end else elseif function if local nil not or repeat return and then until while this';
 var funcs = 'math\\.\\w+ string\\.\\w+ os\\.\\w+ debug\\.\\w+ io\\.\\w+ error fopen dofile coroutine\\.\\w+ arg getmetatable ipairs loadfile loadlib loadstring longjmp print rawget rawset seek setmetatable assert tonumber tostring';

 this.regexList = [
  { regex: new RegExp('--\\[\\[[\\s\\S]*\\]\\]--', 'gm'),  css: 'comments' },
  { regex: new RegExp('--[^\\[]{2}.*$', 'gm'),       css: 'comments' }, // one line comments
  { regex: SyntaxHighlighter.regexLib.doubleQuotedString,     css: 'string' },    // strings
  { regex: SyntaxHighlighter.regexLib.singleQuotedString,     css: 'string' },    // strings
  { regex: new RegExp(this.getKeywords(keywords), 'gm'),  css: 'keyword' }, // keyword
  { regex: new RegExp(this.getKeywords(funcs), 'gm'),      css: 'func' },  // functions
  ];
}

SyntaxHighlighter.brushes.Lua.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.Lua.aliases = ['lua'];

3. 使用FTP工具登陆到WordPress空间,进入到wp-content/plugins目录,新建一个目录,取一个有意义的名字,比如syntaxhighlighter-lua;
4. 将shBrushLua.js上传到新创建的目录;
5. 在该目录创建一个另一个shBrushLua.php文件,添加如下内容:

复制代码 代码如下:

<?php
/*
Plugin Name: SyntaxHighlighter Evolved: Lua
Description: Adds support for the Lua language to the SyntaxHighlighter Evolved plugin.
Author: Benny
Version: 1.0.0
*/

// SyntaxHighlighter Evolved doesn't do anything until early in the "init" hook, so best to wait until after that
add_action( 'init', 'syntaxhighlighter_lua_regscript' );

// Tell SyntaxHighlighter Evolved about this new language/brush
add_filter( 'syntaxhighlighter_brushes', 'syntaxhighlighter_lua_addlang' );

// Register the brush file with WordPress
function syntaxhighlighter_lua_regscript() {
    wp_register_script( 'syntaxhighlighter-brush-lua', plugins_url( 'shBrushLua.js', __FILE__ ), array('syntaxhighlighter-core'), '1.1.1' );
}

// Filter SyntaxHighlighter Evolved's language array
function syntaxhighlighter_lua_addlang( $brushes ) {
    $brushes['lua'] = 'lua';
    return $brushes;
}
?>

6. 文件都准备完了,OK,进入到WordPress后台管理的Plugins下,应该能看到新添加的一项syntaxhighlighter-lua,激活它。

Done! It should work now!

其实新添加的js和php文件也可以放到SyntaxHighlighter插件本身的目录下,但是让它独立成插件的好处是,当SyntaxHighlighter升级时,你的个人配置不会因为覆盖而丢失。

更多精彩内容其他人还在看

eWebEditor 上传文件提示格式不正确的解决方法

eWebEditor上传个别图片时出现:请选择一个有效的文件,支持的格式有(GIF|JPG|JPEG|BMP|PNG)!,在WINDOWSXP下使用该组件正常,却在WINDOWS2003上提示
收藏 0 赞 0 分享

xhEditor的异步载入实现代码

xhEditor的异步载入实现代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

FCKeditor 编辑器插入代码功能实现步骤

4步轻松打造可以应用于任何FCK编辑器的CMS及其他程序,一个Fckeditor编辑器的插件,it560独家首发教程,无需增加字段,不修改代码,完全绿色环保。
收藏 0 赞 0 分享

配置fckeditor 实现图片的上传

配置fckeditor 实现图片的上传
收藏 0 赞 0 分享

FCKeditor提供了一个完整的JavaScript API

FCKeditor提供了一个完整的JavaScript API(Application Public Interface),你可以利用这些API来处理FCK编辑器,只要它被加载完成或在正在运行中.
收藏 0 赞 0 分享

fckediter javascript事件函数代码

fckediter javascript事件函数代码,另外fckeditor的可以扩展性不错,大家可以学习下,具体的代码,可以参考脚本之家以前发布的文章。
收藏 0 赞 0 分享

ASP FCKeditor在线编辑器使用方法

我用的是asp,FCKeditor没有使用帮助,网上google以下资料很多,但不是很全,不适合刚入门的菜鸟使用,通过我半天的使用经历,稍微做了些整理,便于大家学习.
收藏 0 赞 0 分享

ASP下使用FCKeditor在线编辑器的方法

有不少朋友现在也喜欢用asp下用fckeditor编辑器了,下面是具体的使用方法。需要的朋友可以参考下。
收藏 0 赞 0 分享

ASP.NET中FCKEDITOR在线编辑器的用法

FCKEDITOR在线编辑器在asp.net下的使用方法,需要的朋友可以参考下。
收藏 0 赞 0 分享

php下FCKeditor2.6.5网页编辑器的使用方法

php下FCKeditor2.6.5网页编辑器的使用方法,需要的朋友可以参考下。
收藏 0 赞 0 分享
查看更多