wordpress高亮解决方案

虽然wordpress有很多插件可以使页面代码高亮展示,但我还是喜欢 Prism ,Prism支持包括C,Java,CSS,HTML,PHP等所有流行语言,且使用简单,下载文件后引入文件即可使用,下面介绍下wordpress中如何使用Prism如何高亮代码块。

  • 下载Prism

选好所需配置后,页面底部分别下载js和css文件即可。

  • 进入wordpress项目根目录,找到主题目录下的css和js文件夹,将刚刚下载的prism.css和prism.js放入对应文件夹中。
  • 根据官方Api文档的介绍 Quicktags API ,需要在主题目录下的functions.php中添加如下代码:
    function add_prism() {
        wp_register_style(
                'prismCSS',
                get_stylesheet_directory_uri() . '/css/prism.css' //get_stylesheet_directory_uri()为主题根目录
            );
            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');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' );

打开新建文章页面,发现文本编辑框多了几个按钮

查看页面,高亮显示成功:


 上一篇
mac环境汇总 mac环境汇总
安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 解决OSX 10.13 H
2019-03-18
本篇 
wordpress高亮解决方案 wordpress高亮解决方案
虽然wordpress有很多插件可以使页面代码高亮展示,但我还是喜欢 Prism ,Prism支持包括C,Java,CSS,HTML,PHP等所有流行语言,且使用简单,下载文件后引入文件即可使用,下面介绍下wordpress中如何使用Pri
2019-03-18
  目录