无主题 · 开发技术博客

wordpress 深度集成SyntaxHighlighter实现代码高亮

作为软件开发类技术博客,不可缺少的功能就是代码高亮功能。网上也有很多插件可以实现代码高亮功能,如:CodeColorerWP-SyntaxWP-CodeCrayon Syntax HighlighterWP Code Highlight。这里不做过多评价。本文主要讲述深度集成 SyntaxHighlighter 实现代码高亮功能,而非插件形式。

本文使用的 SyntaxHighlighter 基础代码为早期版本,并非最新版(PS:github上当前最新已经是4.x版本,我使用的是早期1.x版本,并且代码经过精简处理)。没有使用最新代码的原因是早起代码功能精炼,功能已经可以满足日常需求。

SyntaxHighlighter

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件。

官网地址:http://alexgorbatchev.com/SyntaxHighlighter/

Github地址:https://github.com/syntaxhighlighter/syntaxhighlighter

实现功能

1.在不破坏 TinyMCE 编写的标签结构前提下,实现代码高亮功能。

2.为 TinyMCE 增加格式类型,以便在 TinyMCE 可视化编辑器状态下快速设置格式。

3.前端代码高亮支持快速预览功能。

4.前端代码高亮展示,支持语言显示。

代码编写

前端高亮功能

目录结构如下

|--主题根目录
|--js
   |--SyntaxHighlighter.js
|--css
   |--SyntaxHighlighter.css
|--images
   |--ico_plain.gif

百度网盘打包下载链接: https://pan.baidu.com/s/1dE99ZDR 密码: 3ved

下载后解压到主题根目录。

在主题js中增加如下代码

$(function() { 
  dp.SyntaxHighlighter.HighlightAll('code');
  $('.highlighter').addClass('dp-highlighter');
});

前端展示样式,至于复制功能,我是用的 ZeroClipboard.js 库大家可以自由发挥该功能,本文中提供代码没有复制功能。

后台 TinyMCE 扩展

主题 functions.php 中增加如下代码

/* 
 * 增加TinyMCE增加功能-无主题博客提供
 * 文章链接:http://wuzhuti.cn/2729.html
 */
add_filter('tiny_mce_before_init', 'my_mce_before_init_insert_formats');
function my_mce_before_init_insert_formats($init_array) {
    $style_formats = array(
        array('title' => 'code-java' ,
            'selector' => 'pre' ,
            'classes' => 'java' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'code-js' ,
            'selector' => 'pre' ,
            'classes' => 'js' ,
            'attributes' => array('title' => 'code')
        ),
        array('title' => 'code-html' ,
            'selector' => 'pre' ,
            'classes' => 'html' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'code-jsp' ,
            'selector' => 'pre' ,
            'classes' => 'jsp' ,
            'attributes' => array('title' => 'code')
        ),
        array('title' => 'code-xml' ,
            'selector' => 'pre' ,
            'classes' => 'xml' ,
            'attributes' => array('title' => 'code')
        ),
        array('title' => 'code-sql' ,
            'selector' => 'pre' ,
            'classes' => 'sql' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'code-php' ,
            'selector' => 'pre' ,
            'classes' => 'php' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'ActionScript3' ,
            'selector' => 'pre' ,
            'classes' => 'as3' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Bash/shell' ,
            'selector' => 'pre' ,
            'classes' => 'shell' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'ColdFunsion' ,
            'selector' => 'pre' ,
            'classes' => 'cf' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'C#' ,
            'selector' => 'pre' ,
            'classes' => 'c-sharp' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'C++' ,
            'selector' => 'pre' ,
            'classes' => 'c' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Delphi' ,
            'selector' => 'pre' ,
            'classes' => 'delphi' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Diff' ,
            'selector' => 'pre' ,
            'classes' => 'diff' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Erlang' ,
            'selector' => 'pre' ,
            'classes' => 'erl' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Groovy' ,
            'selector' => 'pre' ,
            'classes' => 'groovy' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'JavaFX' ,
            'selector' => 'pre' ,
            'classes' => 'jfx' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Perl' ,
            'selector' => 'pre' ,
            'classes' => 'pl' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Plain Text' ,
            'selector' => 'pre' ,
            'classes' => 'text' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'PowerShell' ,
            'selector' => 'pre' ,
            'classes' => 'ps' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Python' ,
            'selector' => 'pre' ,
            'classes' => 'py' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Ruby' ,
            'selector' => 'pre' ,
            'classes' => 'ruby' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'Scala' ,
            'selector' => 'pre' ,
            'classes' => 'scala' ,
            'attributes' => array('title' => 'code')
        ), 
        array('title' => 'VB' ,
            'selector' => 'pre' ,
            'classes' => 'vb' ,
            'attributes' => array('title' => 'code')
        ));
    $init_array['style_formats'] = json_encode($style_formats);

    $init_array['theme_advanced_blockformats'] = "p,pre,address,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp";

    return $init_array;
}

后台 TinyMCE 编辑器中出现快捷格式设置

使用方法

使用pre 标签,class 为 代码高亮格式,title 为高亮插件处理标识。

<pre class="js" title="code">
    alert("js 代码");
</pre>

到此为止,代码高亮功能集成成功。如果在使用过程中遇到任何问题欢迎留言反馈,我会在第一时间帮助大家解决。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

¥ 打赏博主
站内评论 新浪微博评论
发表评论
评论(55)
没有看到评论?强制刷新
评论 (8)
引用 (1)
  • 37楼
    AFR :

    为什么我用了以后还是不行……
    我主题有问题吗

    2017.04.19 15:26 中国辽宁大连 | Windows 7 | Firefox 52.0 回复
  • 36楼
    增达网 :

    从百度进来的,拜读一下贵站博文先
    丁酉年(鸡)二月十五 2017-3-12

    2017.03.12 10:35 美国密苏里州 | Windows 7 | 搜狗浏览器 2.X 回复
  • 35楼
    窝客资源 :

    很喜欢你的打赏插件,楼主能分享下吗

    2017.03.12 03:21 中国浙江台州 | Windows 7 | Chrome 56.0.2924.87 回复

    • 管理员
      http://wuzhuti.cn小武 :

      打赏是自己写的,等我写篇文章分享一下吧

      2017.03.13 10:19 中国辽宁大连 | Mac OS 10 | Safari 602.2.14 回复
  • 34楼
    窝客资源 :

    很喜欢你的打赏插件楼主能共享吗?

    2017.03.12 03:20 中国浙江台州 | Windows 7 | Chrome 56.0.2924.87 回复
  • 33楼
    http://www.1688.zengda.xin/增达网 :

    增达网:

    群发软件免费下,无限广告免费发,

    百万流量免费享,十级提成免费拿。

    增达网注册网址:

    http://www.1688.zengda.xin/

    2017.03.9 08:53 美国密苏里州 | Windows 7 | 搜狗浏览器 2.X 回复
  • 32楼
    增达网 :

    就是喜欢看你博客!

    2017.03.6 11:41 美国密苏里州 | Windows 7 | 搜狗浏览器 2.X 回复
  • 31楼
    http://www.aeink.com墨渊 :

    支持

    2017.03.5 18:08 中国北京北京 | Windows 7 | Chrome 47.0.2526.108 回复