最新wordpress使用prism纯代码高亮插件完整教程

2018年1月1日23:32:42 3 2,976
摘要

网上各类代码高亮插件多如牛毛,但是真正能有一个十分满意的非常困难。今天给大家介绍一个小巧、实用、可定制的代码高亮插件Prism。本文将详细介绍prism的使用方法,以及如何避免出现各种问题。

一、下载prism.css和prism.js文件

请先到prism官网下载必要的prism.cssprism.js文件,根据自己的需求来选择,包括插件版本(开发版、压缩版)、主题样式、高亮语言、插件功能等。prism官网

二、将上述css和js两个文件嵌入各个代码高亮页面

首先,将prism.css上传至主题根目录,将prism.js上传至主题中的JS目录;然后,将下列代码添加至主题functions.php文件<?php之后。

function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/prism.css' //你所存放的prism.css文件路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/js/prism.js'   //你所存放的prism.js文件路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

现在你就可以在编辑器文本模式中以下面形式使用prism啦!

<pre class=" language-语言"><code class=" language-语言">代码</code></pre>
但是,有两个致命的错误,一是每次输入太麻烦,二是对于<>&等不能自动转义,会使代码发生错乱等等错误。后续步骤往下看。

三、在WordPress编辑器TinyMCE可视化模式中添加弹出对话框

1.在主题的 js 目录下新建一个mce_code_plugin.js文件

并粘贴进下面的代码,代码中有按钮图标、mce_code_plugin.htm,先不用管,后面会介绍。

(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.在主题的 js 目录下新建一个mce_code_plugin.htm文件

htm文件内容主要是弹出框的样式,大家可以自定义。将下面代码添加进该文件中。

<html>
<head>
    <!-- Disable browser caching of dialog window -->
	<meta http-equiv="Content-Type" content="text/html, charset=UTF-8" />
    <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= 'line-numbers'><code class='language-" + lang + "'>" + htmlEntities(code) + "</code></pre>";
        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="java">Java</option>
                <option value="html">html</option>
                <option value="css">css</option>
	       <option value="php">php</option>
                <option value="js">js</option>
                <option value="markup">markup</option>
            </select>
            <textarea id="code" autofocus></textarea>
            <p><input type="submit" value="Insert" /></p>
        </div>
        
    </form>
</body>
</html>

3.引入并注册弹出按钮

将下面代码放进主题的functions.php文件。之前参考了网上的其他方法,大多数都是有问题的,添加代码后整个网站都500错误。最后,终于找到了正确的方法,下面代码理论上适用所有主题。如果有错误,请留言。

add_action( 'admin_init', 'my_tinymce_button' );
function my_tinymce_button() {
     if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
          add_filter( 'mce_buttons', 'my_register_tinymce_button' );
          add_filter( 'mce_external_plugins', 'my_add_tinymce_button' );
     }
}

function my_register_tinymce_button( $buttons ) {
     array_push( $buttons, "button_eek", "button_green" );
     return $buttons;
}

function my_add_tinymce_button( $plugin_array ) {
     $plugin_array['my_button_script'] = get_bloginfo('template_directory') . "/js/mce_code_plugin.js";//js所在文件路径
     return $plugin_array;
}

四、文件说明

上面的教程涉及到了以下文件

主题路径/
    prism.css

主题路径/js/
    prism.js
    mce_code_plugin.js
    mce_code_plugin.htm
    code.png

五、最终效果

根据上面的步骤完成操作后,你会在编辑器可视化模式下看到弹出框的按钮,如图。

点击按钮后,会弹出对话框,选择高亮代码语言,并将高亮代码添加进入即可,如图。

结束!

    
weinxin
官方QQ交流群
扫一扫加入交流群获取更多资源

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

私信给楼主

目前评论:3   其中:访客  3   博主  0

    • avatar 梵天 1

      请问下贵站使用的代码高亮也是这个吗

        • avatar 小强007 1

          @梵天 是的,是用的prism

        • avatar hao 1

          推荐博主用markdown编辑器,这样代码高亮什么的很easy。另外这个评论框效果真的影响我输入啊!