Wordpress 打造自己的代码高亮

代码高亮对于程序员写博客来说，还是非常有必要的，毕竟你写个文章贴个代码看起来乱七八糟，也不好看！

博客写了好多年了，贴的代码也不少，之前一直使用的插件，总感觉有点过重了，为了一个代码高亮引入了太多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
		}
	});
});

到此就完成了。附上一个图片最终的样子吧！