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()
后台经典编辑器插入代码：
前台显示代码高亮：
不错吧，html代码都无需去转译，方便多了。
