一直想做这个事情,但又觉得可有可无,就一直拖到现在。这几天事情不多,今天下午突然想起来这事,不如把它实现了。
在 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');
保存后,到后台启用该插件即可看到效果。