wordpress整合 Prism.js实现代码高亮 切图网自用

Prism.js是一个简约漂亮的代码高亮插件,就冲简单 好用就值得一用,如何把它整合到wordpress,附代码,也是切图网自己再用的。

代码添加到主题的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' );

posted on 2023-12-10 15:46  专注做前端  阅读(37)  评论(0编辑  收藏  举报

导航