Prism.js直达连接:https://prismjs.com/download.html
首先我们在主题目录下function.php中添加如下代码:
//Prism.js开始 function add_prism() { wp_register_style( 'prismCSS', get_stylesheet_directory_uri() . '/prism/prism.css' //自定义路径 ); wp_register_script( 'prismJS', get_stylesheet_directory_uri() . '/prism/prism.js' //自定义路径 ); wp_enqueue_style('prismCSS'); wp_enqueue_script('prismJS'); } add_action('wp_enqueue_scripts', 'add_prism'); //Prism.js结束
然后添加后台编辑器快捷按钮,同样在function.php总添加代码:
//自定义编辑器添加快捷键 <pre class="line-numbers"><code class="language-php"> //自定义编辑器添加快捷键 function appthemes_add_quicktags() { ?> <script type="text/javascript"> QTags.addButton( 'codeHighlight', 'HTML', 'n[pre class="line-numbers">[code class="language-markup"]n HTML代码n[/code][/pre]n' ); QTags.addButton( 'php', 'PHP', 'n[pre class="line-numbers">[code class="language-php"]n PHP代码n[/code][/pre]n' ); QTags.addButton( 'python', 'Python', 'n[pre class="line-numbers">[code class="language-python"]n Python代码n[/code][/pre]n' ); QTags.addButton( 'css', 'CSS', 'n[pre class="line-numbers">[code class="language-css"]n CSS代码n[/code][/pre]n' ); QTags.addButton( 'js', 'JavaScript', 'n[pre class="line-numbers">[code class="language-javascript"]n JavaScript代码n[/code][/pre]n' ); QTags.addButton( 'bash', 'bash', 'n[pre class="line-numbers"><code class="language-bash"]n Bash代码n[/code][/pre]n' ); </script> <?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' ); //添加快捷键结束
修改[]为<>
最后保存一下,编辑文字点击编辑器上的按钮,就可以添加对应的片段,实现代码高亮了!