WordPress集成JavaScript code prettifier代码高亮插件

JavaScript code prettifier是Google的一个代码高亮插件,WordPress可以非插件方式集成也是比较简单的。

JavaScript code prettifier
JavaScript code prettifier

一、引入JS

WordPress引入js的方法需要用到 wp_enqueue_scripts 来做。

代码高亮SyntaxHighlighter Evolved让其不加载所有js

function info_scripts()
{
    wp_enqueue_script('code-prettify', 'https://cdn.jsdelivr.net/npm/[email protected]/loader/run_prettify.min.js', false, null, true);
}
add_action('wp_enqueue_scripts', 'info_scripts');

二、编辑器参加pre按钮

pre按钮在TinyMCE编辑器中是没有的,可以参考“给WordPress编辑器TinyMCE的文本模式增加H2,H3按钮”的方法来做:

// Quicktags API
function appthemes_add_quicktags()
{
    if (wp_script_is('quicktags')) {
        ?>
    <script type="text/javascript">
    QTags.addButton( 'eg_pre', 'pre', '<pre class="prettyprint">', '</pre>', 'pre', '', 200 );
    </script>
<?php
    }
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags');

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注