WordPress使用开源代码Prism.js实现文章代码高亮功能

2018/05/2323:20:45WordPress使用开源代码Prism.js实现文章代码高亮功能已关闭评论 5,127

WordPress使用Prism.js开源代码实现代码高亮功能，漂亮的代码语法高亮插件Prism.js简单使用文档？

在wordpress博客里的代码高亮插件很多，以highlight为关键字能搜索出很多相关的插件。比如highlight.js，Crayon Syntax Highlighter，Simple Code Highlighter，wp-syntax，SyntaxHighlighter ，Google Code Prettify，SyntaxHighlighter Evolved...也使用过许多，最后还是决定使用Prism.js实现文章代码高亮。Prism.JS也大部分流行的编程语言，并且支持多种主题样式，只需要引用CSS文件和JS文件即可完成。

Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。

Prismjs就可以让我们的wordpress不用装插件就实现代码高亮的功能，Prismjs是一个开源的专门做代码高亮的项目，他的代码特点是简约、轻巧、便捷、高效、快速，而且他支持127种程序语言的代码高亮，最主要的是Prismjs只有一个JS文件和一个CSS文件。使用Prismjs来实现代码高亮的时候，只要下载这两个文件到自己的网站，然后将这两个文件引入到页面上就可以了。

为什么选择 Prism.js ？

极致易用
引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！

天生伶俐
语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。

轻如鸿毛
代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。

快如闪电
如果可能，支持通过 Web Workers 实现并行。

轻松扩展
定义新语言或扩展现有语法，或者新增功能都非常简单。

丰富样式
所有的样式通过 CSS 完成，并使用合理的类名如：.comment, .string, .property 等。

怎么使用Prism.js？

进入代码官网：http://prismjs.com/download.html，根据自己需要选择所需功能，再分别下载所需的JS和CSS文件。上传到自己的主题目录下的CSS和JS文件夹。

functions.php添加代码：

// 代码高亮 Prism.js
 function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/css/prism.css' //自定义路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/js/prism.js' //自定义路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

方法二：编辑header.php文件，在和之间加入代码：

<link href="/wp-content/themes/yourtheme/prism.css" rel="stylesheet" />

编辑footer.php，在之前加入代码：

<script src="/wp-content/themesyour_theme/prism.js"></script>

最后一步，就是在后台发布文章的时候使用以下形式就能实现代码高亮的功能。

<pre><code class="language-c">  code_here </code></pre>

提示：
1、language-php中，红色字体可修改任意语言，但必须保留language-，如language-c。
2、如果你想每行代码前带序号，只需要在标签中加class="line-numbers" 即可。

除开wordpress博客的其他网页使用方法：

<!DOCTYPE html>
<html>
<head>
     ...
     <link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
     ...
     <script src="prism.js"></script>
</body>
</html>

遵循HTML5标准，使用语义化的<pre>元素和<code>元素来标记代码区块：

<pre><code class="language-css"> div p { color: red } </code></pre>

可能有问题发生，就是我们放进去的代码会被Wordpress自动把半角符号替换为全角，这样带来的问题就是，别人复制你的代码后，无法正常使用。操作方法就是找到我们主题文件的functions.php，打开后在最下面贴上。

//禁止代码标点转换
remove_filter('the_content', 'wptexturize');

扩展：加入后台可视化界面可视化插入代码，参考以下文章实现功能。
WordPress代码高亮方案：Prism
WordPress编辑器TinyMCE添加弹出对话框(dialog)按钮的方法

方法一

实现集成到后台功能，不用每次都手动写调用代码。

为后台编辑文章的时候添加“插入代码”的功能，给TinyMCE添加一个弹出对话框按钮的方法。
1、在主题的 js 目录下新建一个mce_code_plugin.js文件。
(function($) {
    tinymce.create('tinymce.plugins.specs_code_plugin', {
        init: function(editor, url) {
            editor.addButton('specs_code_plugin', {
                title: "Insert Code", //  鼠标放在按钮上时的提示文字
                image: url + '/code.png', //  按钮图标
                cmd: 'tdsk_command' //  点击时执行的方法
            });
            editor.addCommand('tdsk_command', function() {
                editor.windowManager.open(
                    {
                        title: "Insert Code", //  对话框的标题
                        file: url + '/mce_code_plugin.htm', // 放置对话框内容的HTML文件
                        width: 500, //  对话框宽度
                        height: 400, //  对话框高度
                        inline: 1 //  Whether to use modal dialog instead of separate browser window.
                    }
                );
            });
        }
    });
   tinymce.PluginManager.add('specs_code_plugin', tinymce.plugins.specs_code_plugin);
})(jQuery);
2、再创建一个mce_code_plugin.htm文件（名字要与上面JS中的相同），这个HTML文件里的内容大家可以自己定义，里面内容就是点击按钮后弹出的对话框的内容。
<html>
<head>
    <!-- Disable browser caching of dialog window -->
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <style type='text/css'>
    body {
        font-family: sans-serif;
        font-size: 1.1em;
        background-color: #F1F1F1;
        color: #222;
    }
    .codeArea {
        margin: 10px auto;
        text-align: center;
    }
    textarea {
        margin-top: 10px;
        width: 100%;
        height: 300px;
    }
    </style>
    <script>
    function htmlEntities(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
 
    function InsertValue() {
        codeNode = document.getElementById('code')
        code = codeNode.value;
        if(code == '') {codeNode.focus(); return;}
        lang = document.getElementById('lang').value;
        code = "<pre class='" + lang + "'>" + htmlEntities(code) + "</pre><p></p>";
        window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, code); //获取内容并插入到编辑器
        window.parent.tinyMCE.activeEditor.windowManager.close(); //关闭对话框
    }
    </script>
</head>
<body>
    <form onsubmit="InsertValue();return false;">
        <div class="codeArea">
            <label for="lang">代码语言</label>
            <select id="lang">
                <option value="php">PHP</option>
                <option value="html">HTML</option>
                <option value="css">CSS</option>
                <option value="js">JS</option>
                <option value="others">OTHERS</option>
            </select>
            <textarea id="code" autofocus></textarea>
            <p><input type="submit" value="Insert" /></p>
        </div>
        
    </form>
</body>
</html>

3、打开 functions.php ，引入JS并注册按钮。

function spces_code_plugin() {
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
      return;
   }
   if ( get_user_option('rich_editing') == 'true' ) {
      add_filter( 'mce_external_plugins', 'specs_mce_external_plugins_filter' );
      add_filter( 'mce_buttons', 'specs_mce_buttons_filter' );
   }
}
add_action('admin_head', 'spces_code_plugin');
function specs_mce_external_plugins_filter($plugin_array) {
    $plugin_array['specs_code_plugin'] = get_template_directory_uri() . '/js/mce_code_plugin.js';      
    return $plugin_array;
}
function specs_mce_buttons_filter($buttons) {
    array_push($buttons, 'specs_code_plugin');
    return $buttons;
}

这里是一个要添加代码的目录结构，不是代码哈。

主题目录/js/
mce_code_plugin.js
mce_code_plugin.htm
code.png

主题目录/
functions.php

如果自己主题有冲突，要么查找冲突的函数，重新命名；要么使用下面的方法二，也可以实现。

方法二

集成带后台按钮。

// 自定义代码高亮按钮
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
        ?>
        <script type="text/javascript">
            QTags.addButton( 'syz_PHP', 'PHP', '<pre><code class="language-php">', '</code></pre>', 'z', 'PHP 代码高亮');
            QTags.addButton( 'syz_HTML', 'HTML', '<pre ><code class="language-markup">', '</code></pre>', 'h', 'HTML 代码高亮');
            QTags.addButton( 'syz_CSS', 'CSS', '<pre><code class="language-css">', '</code></pre>', 'c', 'CSS 代码高亮');
            QTags.addButton( 'syz_Js', 'JavaScript', '<pre><code class="language-javascript">', '</code></pre>', 'j', 'JavaScript 代码高亮');
            QTags.addButton( 'syz_Bash', 'Bash', '<pre><code class="language-bash">', '</code></pre>', 'b', 'Bash 代码高亮');
        </script>
        <?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

这样我们在编辑文章的时候，切换到文本模式，就可以使用了。

附：
Prism 官网 | 代码示例 | 立即下载 | GitHub

完毕。

 

历史上的今天
05月
23
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin