WordPress代码高亮原来这么简单:TinyMCE Code Sample真香

WordPress代码高亮总是老生常谈,码农写作离不开的功能。无论highlight.js还是SyntaxHighlighter Evolved总有些地方不完美。

今天在给TinyMCE扩展功能才发现TinyMCE Code Sample可以实现WordPress代码高亮,具体说说方法。

WordPress主题文件functions.php中或者使用Code Snippets插件添加自定义代码:

add_filter( 'mce_external_plugins', 'code_sample_add_external_plugin', 999, 1 );
add_filter( 'mce_buttons', 'code_sample_button', 999, 1 );
add_action( 'admin_enqueue_scripts', 'code_sample_scripts' );
add_action( 'wp_enqueue_scripts', 'code_sample_wp_scripts' );

/**
 * Adds the Code Sample TinyMCE plugin from the CloudFlare CDN to
 * the list of MCE plugins.
 * 
 * @hooked 		mce_external_plugins
 * @since 		1.0.0
 * @param 		array 		$mce_plugins 		The current MCE plugins array.
 * @return 		array 		$mce_plugins 		The modified MCE plugins array.
 */
function code_sample_add_external_plugin( $mce_plugins ) {

	$mce_plugins['codesample'] = 'https://cdn.jsdelivr.net/npm/[email protected]/plugins/codesample/plugin.min.js'; // 

	return $mce_plugins;

} // code_sample_add_external_plugin()

/**
 * Adds the Code Sample button to the list of buttons
 * for the first row of the TinyMCE editor.
 * 
 * @hooked 		mce_buttons
 * @since 		1.0.0
 * @param 		array 		$mce_buttons 		The current MCE buttons array.
 * @return 		array 		$mce_plugins 		The modified MCE buttons array.
 */
function code_sample_button( $mce_buttons ) {

	$mce_buttons[] = 'codesample';

	return $mce_buttons;

} // code_sample_button

/**
 * Enqueues the init script to initialize the Code Sample TinyMCE plugin.
 * 
 * @since 		1.0.0
 */
function code_sample_scripts() {

	// wp_enqueue_script( 'code-sample-init', plugin_dir_url( __FILE__ ) . 'js/code-sample-init.js', array(), '1.0.0', true );
	?>
	<script>
		(function (tinymce) {

if (!tinymce) { return; }

tinymce.init({
	selector: 'textarea',
	height: 500,
	plugins: 'codesample code',
	// codesample_dialog_width: '400',
	// codesample_dialog_height: '400',
	codesample_languages: [
		{ text: 'HTML/XML', value: 'markup' },
		{ text: 'JavaScript', value: 'javascript' },
		{ text: 'CSS', value: 'css' },
		{ text: 'PHP', value: 'php' },
		{ text: 'Ruby', value: 'ruby' },
		{ text: 'Python', value: 'python' },
		{ text: 'Java', value: 'java' },
		{ text: 'C', value: 'c' },
		{ text: 'C#', value: 'csharp' },
		{ text: 'C++', value: 'cpp' }
	],
	toolbar: 'codesample code',
	// content_css: [
	// 	'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
	// 	'//www.tinymce.com/css/codepen.min.css']
});

}(window.tinymce));
	</script>

<?php } // code_sample_scripts()

function code_sample_wp_scripts() {
	wp_enqueue_style( 'prismjs-css', 'https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css', array(),null);
	wp_enqueue_script( 'prismjs-js', 'https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js', array(), null, true );
} // code_sample_wp_scripts()

后台经典编辑器插入代码:

经典编辑器后台插入代码
经典编辑器后台插入代码

前台显示代码高亮:

WordPress TinyMCE Code Sample
WordPress TinyMCE Code Sample

不错吧,html代码都无需去转译,方便多了。

发表回复

您的电子邮箱地址不会被公开。