tinyMCE整合SyntaxHighlighter使代码高亮

最新推荐文章于 2024-05-30 11:43:13 发布

weixin_30274627

最新推荐文章于 2024-05-30 11:43:13 发布

阅读量198

点赞数

文章标签： python java javascript ViewUI

原文链接：http://www.cnblogs.com/defei/archive/2012/07/12/2587876.html

版权

要在页面上实现代码高亮功能，需要几个步骤。首先，是将我们需要高亮的代码包含在<pre></pre>标签中。HTML里的其他便签是不包含换行和空格的，但<pre>标签中的内容将包含空格和换行符，所以可以用来保留我们需要加亮的程序代码结构。

然后我们为<pre>标签指定一个类名为某种语言，如：

<pre class="brush: java;fontsize: 100; first-line: 1; ">    protected String redirect(String target) {
        setTarget(target);
        return "redirect";
    }</pre>

通过JS脚本，将这个指定为Python语言的<pre>标签中的所有内容按照Python语法，切割转换为<code>,<span>等标签，指定相应的CSS就可以实现代码高亮，如转换为这样：

<pre>    <span style="color: #0000ff;">protected</span><span style="color: #000000;"> String redirect(String target) {
        setTarget(target);
        </span><span style="color: #0000ff;">return</span> "redirect"<span style="color: #000000;">;
    }</span></pre>

目前网上有很多代码加亮脚本，SyntaxHighlighter就是其中使用最广泛的一个。要使用SyntaxHighlighter加亮代码，只需要在页面导入SyntaxHighlighter的JS和CSS文件，就可以对特定类名的<pre>标签进行转换了，如：

...
<head>
<script type="text/javascript" src="/media/editor/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/media/editor/syntaxhighlighter/scripts/shBrushJava.js"></script>
<link href="/media/editor/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css"/>
<link href="/media/editor/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</head>
<body>
<pre class="brush: java;fontsize: 100; first-line: 1; ">
java code...
</pre>
</body>
...

shBrushCore.js是SyntaxHighlighter的核心，shBrushPython.js是特定语言的着色文件，需要对应添加。

说到这里，其实我还没有说到正题，就是我们怎么为tinyMCE添加SyntaxHighlighter呢？这里我们将用到一个叫做RichGuk-syntaxhl的tinyMCE插件，通过这个插件，我们就可以在后端将需要加亮的代码包含在<pre>标签之中，并指定和程序语言对应的类名。通过前段页面加载SyntaxHighlighter，就可以实现代码加亮了。

将下载的RichGuk-syntaxhl解压，把RichGuk-syntaxhl目录拷贝到tiny_mce目录下的存放插件的plugins文件夹里，修改tiny_mce的配置，比如我在settings里的配置：

'plugins':'syntaxhl',
'theme_advanced_buttons1' : "undo,redo,|,bold, ... syntaxhl",

这样我们就把RichGuk-syntaxhl安装好了。

RichGuk-syntaxhl这个插件自带了中文语言包，但在我这显示的是乱码，我将RichGuk-syntaxhl中langs目录下的zh_dlg.js文件转换为GBK编码就正常了。这个插件默认可以添加10来种常见的语言，做为业余编程爱好者，很多我都不会，所以我略微修改了dialog.htm文件，只保留了几种我需要的语言，并把Python调到了最前面。这个插件还有一个BUG，就是你添加完代码后，光标会停留在<pre>标签中，致使我们无法编辑下面的内容，所以我动手修改了dialog.js，将41行下面添加了一行，使得添加完代码后自动加上换行符：

textarea_output += '</pre> '; /* note space at the end, had a bug it was inserting twice? */
textarea_output += '<p></p>';
tinyMCEPopup.editor.execCommand('mceInsertContent', false, textarea_output);

此外使用这个插件在tinyMCE中插入的代码，由于在编辑器中没有加载SyntaxHighlighter，所以代码是不高亮的，和我们其他文字内容混在一起，不容易识别和编辑，所以我在tinyMCE的themes各种皮肤包的content.css最后加上如下的css代码

pre {
padding: 5px;
border: 1px solid #CCC;
}

编辑器中的效果是这样的：

如果不满足SyntaxHighlighter的默认显示效果，可以修改SyntaxHighlighter目录下的styles\shThemeDefault.css文件的样式效果。

转载于:https://www.cnblogs.com/defei/archive/2012/07/12/2587876.html

weixin_30274627

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tinyMCE整合SyntaxHighlighter使代码高亮

要在页面上实现代码高亮功能，需要几个步骤。首先，是将我们需要高亮的代码包含在<pre></pre>标签中。HTML里的其他便签是不包含换行和空格的，但<pre>标签中的内容将包含空格和换行符，所以可以用来保留我们需要加亮的程序代码结构。然后我们为<pre>标签指定一个类名为某种语言，如：<pre class="brush...
复制链接

扫一扫