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
代码都无需去转译,方便多了。