WordPress 打造自己的代码高亮

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

博客写了好多年了,贴的代码也不少,之前一直使用的插件,总感觉有点过重了,为了一个代码高亮引入了太多JS、CSS。

所以就打算自己打造一个,这个是基于 highlight.js 来打造的!其中使用了一个滚动条的美化JS jquery.mCustomScrollbar.min.js

引入需要文件

将文件引入主题的 functions.php

// functions.php
function highlight_scripts() {
	wp_enqueue_script('highlight', get_template_directory_uri(). '/extend/highlight.min.js', 'jQuery', '9.12.0', true);
	wp_enqueue_script('mCustomScrollbar', get_template_directory_uri(). '/extend/jquery.mCustomScrollbar.min.js', 'jQuery', '1.0', true);
	wp_enqueue_script('extend', get_template_directory_uri(). '/extend/custom.js', '', '1.0', true);
}

function highlight_styles() {
	wp_enqueue_style('highlight', get_template_directory_uri(). '/extend/highlight.css', '', '9.12.0', 'all');
	wp_enqueue_style('extend', get_template_directory_uri(). '/extend/custom.css', '', '1.0', 'all');
	wp_enqueue_style('mCustomScrollbar', get_template_directory_uri(). '/extend/jquery.mCustomScrollbar.min.css', '', '1.0', 'all');
}

add_action( 'the_post', 'highlight_styles');
add_action( 'the_post', 'highlight_scripts' );

注册按钮

// 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
hljs.initHighlightingOnLoad();

// 代码高亮滚动条
(function($) {
	$(window).on("load", function() {
		$(".hljs").mCustomScrollbar({
			theme: "light-thin",
			axis: "x",
			autoHideScrollbar: true,
			mouseWheel: {
				axis: "y",
				enable: false
			}
		});
	});
})(jQuery);

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

There are no comment yet.

HTML tag cannot be used in this comment.