在众多的Druapl语法高亮插件中,syntax highlighter是最好用的插件,因此,Drupal7+CKEditor+syntax highlighter环境也是最好的。 下面将是讲述如何安装CKEditor+syntax highlighter。 最终安装效果: ![](http://yabang.org/ckfinder/userfiles/images/Drupal7+CKEditor+syntax%20highlighter.png)
- 下载 Ckeditor 和 Syntax highlighter 模块。
- 下载 Syntax highlighter library 解压到 sites/all/libraries
- 下载 CKeditor library 解压到 ../Ckeditor/Ckeditor (一般是 sites/all/modules/Ckeditor/Ckeditor)
- 下载 ckeditor-syntaxhighlight 插件,解压到 ../Ckeditor /Ckeditor/plugins(一般是 "sites/all/modules/Ckeditor/Ckeditor/plugins" ,务必确认解压的目标文件夹为 Ckeditor/Ckeditor,而不是 Ckeditor/plugins)。
- 在文件 /sites/all/modules/ckeditor/includes/ckeditor.lib.inc 314行左右,'plugins section' 后添加以下代码:
if (file_exists($editor_path . 'plugins/syntaxhighlight/plugin.js')) {" n) i6 M& s6 S5 p
$arr['syntaxhighlight'] = array(
7 b: G9 e. ^8 g, _ 'name' => 'syntaxhighlight',
! ]5 w5 r% o( X! n( z 'desc' => t('Syntaxhighlight plugin'), B6 u+ G4 l' c3 t( q* m! [9 B
'path' => base_path() . $editor_path . 'plugins/syntaxhighlight/',3 q( Y* K9 |* o5 M: |( w
'default' => 'f'/ B0 H' Z' L! E( N
);6 T, Z, D/ ~5 t6 p, L+ G' U
} 接下来去管理页面安装模块,配置模块吧。 - 启动语法高亮模块。 admin/config/content/syntaxhighlighter
![ckedito<img data-cke-saved-src=](http://betuts.com/sites/default/files/styles/inline/public/field/image/ckeditor-syntax%20highlight%201_0.png) - 调整相应的HTML 过滤顺序。admin/config/content/formats
![ckeditor-syntax highlighter](http://betuts.com/sites/default/files/styles/inline/public/field/image/Ckeditor-syntaxhighlighter-2_0.png) - 设置 CKeditor 模块。 admin/config/content/ckeditor
1# 开启语法高亮。
![ckeditor-syntax highlighter](http://betuts.com/sites/default/files/styles/inline/public/field/image/ckeditor-syntax-highlighter3.png) 2# 开启<pre>标签
![](http://betuts.com/sites/default/files/field/image/Ckeditor-syntax-highlighter%204.png) 3# 在CKEditor 工具栏中 添加 {code} 按钮。
![ckeditor-syntax highlighter](http://betuts.com/sites/default/files/field/image/Ckeditor-syntax-highlighter.png) 4# 开启 语法高亮 插件
![Ckeditor-syntax-highlighter](http://betuts.com/sites/default/files/field/image/ckeditor-syntax%20highlighter%205.png) - 大公告成。
*注:要谨慎选择 “ Inject js/css code on specific pages ”,在不需要开启代码高亮的页面应该关闭它,否则会因为JS或CSS叠加而引起错误。 |