代码高亮对于程序员写博客来说，还是非常有必要的，毕竟你写个文章贴个代码看起来乱七八糟，也不好看！
博客写了好多年了，贴的代码也不少，之前一直使用的插件，总感觉有点过重了，为了一个代码高亮引入了太多JS、CSS。
所以就打算自己打造一个，这个是基于 highlight.js 来打造的！其中使用了一个滚动条的美化JS jquery.mCustomScrollbar.min.js
引入需要文件
将文件引入主题的 functions.php
// functions.php
function register_scripts() {
wp_register_script('highlight', get_template_directory_uri(). '/extend/highlight.min.js', array('jquery'), '9.12.0', true);
wp_register_script('mousewheel', get_template_directory_uri(). '/extend/jquery.mousewheel.min.js', array('jquery'), '3.1.13', true);
wp_register_script('mCustomScrollbar', get_template_directory_uri(). '/extend/jquery.mCustomScrollbar.min.js', array('jquery','mousewheel'), '3.1.5', true);
wp_register_script('extend', get_template_directory_uri(). '/extend/custom.js', array('jquery','highlight'), '1.0', true);
}
add_action('init','register_scripts');
function register_styles() {
wp_register_style('highlight', get_template_directory_uri(). '/extend/highlight.css', null, '9.12.0', 'all');
wp_register_style('mCustomScrollbar', get_template_directory_uri(). '/extend/jquery.mCustomScrollbar.min.css', null, '3.1.5', 'all');
wp_register_style('extend', get_template_directory_uri(). '/extend/custom.css', null, '1.0', 'all');
}
add_action('init',register_styles);
function load_scripts() {
wp_enqueue_script('highlight');
wp_enqueue_script('mousewheel');
wp_enqueue_script('mCustomScrollbar');
wp_enqueue_script('extend');
}
add_action( 'the_post', 'load_scripts');
function load_styles() {
wp_enqueue_style('highlight');
wp_enqueue_style('extend');
wp_enqueue_style('mCustomScrollbar');
}
add_action( 'the_post', 'load_styles' );
注册按钮
// functions.php
add_action('admin_head', 'highlight_code_plugin');
function highlight_code_plugin() {
global $typenow;
// 判断用户是否有编辑文章和页面的权限
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
if (! in_array($typenow, array('post','page'))) {
return;
}
//判断用户是否使用可视化编辑器
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_button' );
}
}
// 注册按钮
function register_button($buttons) {
array_push($buttons, 'highlight_code');
return $buttons;
}
// 注册TinyMCE按钮插件
function add_plugin($plugin_array) {
$plugin_array['highlight_code'] = get_template_directory_uri() . '/extend/mce_code_plugin.js';
return $plugin_array;
}
添加tinyMCE编辑按钮功能
// mce_code_plugin.js
(function($) {
tinymce.PluginManager.add('highlight_code', function(editor, url) {
editor.addButton('highlight_code', {
// text: 'Code',
// icon: false,
title: 'Highlight Code',
icon: 'wp_code',
onclick: function() {
// Examlpes: https://www.tinymce.com/docs/api/tinymce/tinymce.windowmanager/
editor.windowManager.open({
width: 780,
height: 650,
title: 'Insert Code',
body: [{
type: 'listbox',
name: 'code_type',
label: 'Code Type',
'values': [{
text: 'Java',
value: 'java'
}, {
text: 'Python',
value: 'python'
}, {
text: 'Bash',
value: 'bash'
}, {
text: 'Shell',
value: 'shell'
}, {
text: 'Php',
value: 'php'
}, {
text: 'Sql',
value: 'sql'
}, {
text: 'JavaScript',
value: 'javascript'
}, {
text: 'Json',
value: 'json'
}, {
text: 'Xml',
value: 'xml'
}, {
text: 'Css',
value: 'css'
}, {
text: 'Diff',
value: 'diff'
}]
}, {
type: 'textbox',
name: 'body',
multiline: true,
minWidth: 650,
minHeight: 580
// label: 'Body'
}],
onsubmit: function(e) {
// Insert content when the window form is submitted
// Examlpes:
// tinyMCE.editors[0].insertContent('asdasd')
// https://www.tinymce.com/docs/api/tinymce.html/tinymce.html.entities/#encoderaw
// tinymce.html.Entities.encodeRaw(e.data.body) 格式化html标签
editor.insertContent('<pre class="' + e.data.code_type + '"><code>' + tinymce.html.Entities.encodeRaw(e.data.body) + '</code></pre>');
}
});
}
});
return {
getMetadata: function() {
return {
title: "Highlight Code plugin",
url: "https://jalena.bcsytv.com"
};
}
};
})
})(jQuery);
添加hljs初始化
// custom.js
jQuery(document).ready(function($) {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
$(".hljs").mCustomScrollbar({
theme: "light-thin",
axis: "x",
autoHideScrollbar: true,
mouseWheel: {
axis: "y",
enable: false
}
});
});
到此就完成了。附上一个图片最终的样子吧！
