2020 年 2 月 – 老吴编程笔记

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

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

<?php 
/*
Plugin Name: MyHighlight 
Plugin URI: https://lwbj.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');

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

月度归档： 2020 年 2 月

WordPress 代码高亮插件