WordPress 代码高亮插件

一直想做这个事情,但又觉得可有可无,就一直拖到现在。这几天事情不多,今天下午突然想起来这事,不如把它实现了。

在 plugins 目录新建文件夹 MyHighlight ,然后在 MyHighlight 文件夹下新建文件 MyHighlight .php ,代码如下:

<?php 
/*
Plugin Name: MyHighlight 
Plugin URI: https://www.ilinshu.cn
Description:代码高亮插件
Version: 1.1
Author: wujie
Author URI: https://wujie.me
License: GPL
*/

function add_my_plugin_stylesheet() {
    wp_register_style('highlight', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/atom-one-light.min.css');
    wp_enqueue_style('highlight');
}
add_action( 'wp_print_styles', 'add_my_plugin_stylesheet' );

function add_my_plugin_script() {
    wp_register_script('highlight','//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js');
    wp_enqueue_script('highlight');
}
add_action( 'wp_enqueue_scripts', 'add_my_plugin_script' );

function init_highlighting() { ?>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');
        .hljs{ background:transparent; }
        code {
            font-family: 'Fira Code', consolas,'Microsoft YaHei', monospace;
            background: #dcd7ca;
            border-radius: 0.2rem;     
            padding: 0.3rem 0.4rem 0.3rem 0.4rem;
            font-size: 0.8em;
        }
        
        .wp-block-code code, kbd, pre, samp {
            font-family: 'Fira Code', consolas,'Microsoft YaHei', monospace;
            font-size: 0.5em;
            padding: 0.4rem 0.6rem;
            white-space: pre-wrap;
        }     
    </style>
    <script>
        hljs.initHighlightingOnLoad();
    </script>
<?php
}
add_action('wp_head', 'init_highlighting');

保存后,到后台启用该插件即可看到效果。