为 WordPress 文章添加代码高亮支持
WordPress 编辑器没有代码高亮功能,为改善文章代码片段显示效果,研究了下手动添加方法。先找个代码高亮 JS 现成轮子(这里用的是 Google Code Prettify),然后设置按需加载和触发事件,最后添加 CSS 样式,往编辑器添加代码插入按钮就完成了。
从 JS 里加载文件及触发事件
在 JS 里引入文件有个好处,可以添加判断,只在有代码片段的文章页面加载。
if ($("pre.prettyprint").length > 0) { $.getScript("https://cdn.bootcss.com/prettify/r298/prettify.min.js").done(function() { PR.prettyPrint(); }); }
上面是 jQuery 用法,如需原生 JS 代码查看这篇文章。
如果你不想单独创建 JS 文件,也可直接输出到页面。将下面代码放入主题 functions.php
文件。
function load_prettify_script() { if ( is_single() || is_page() ) { $add_check_js = <<<'EOT' <script> $(document).ready(function() { if ($("pre.prettyprint").length > 0) { $.getScript("https://cdn.bootcss.com/prettify/r298/prettify.min.js").done(function() { PR.prettyPrint(); }); } }); </script> EOT; echo $add_check_js ."\n"; } } add_action( 'wp_footer', 'load_prettify_script' );
设置“文章”和“页面”加载 JS
function post_scripts() { if ( is_single() || is_page() ) { wp_enqueue_script( 'code-prettify', get_theme_file_uri( '/js/code-prettify.js' ), array(), null, true ); } } add_action( 'wp_enqueue_scripts', 'post_scripts' );
如第 1 步骤选择直接输出到页面,那么这步可以省略。
添加代码高亮CSS样式
pre.prettyprint{background:#273238;border:0px solid #888} ol.linenums{margin-top:0;margin-bottom:0} li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#969896;list-style-type:decimal;padding-left:.625rem} li.L1,li.L3,li.L5,li.L7,li.L9{background:#273238} span.str{color:#ec7600} span.kwd{color:#d4a0e9} span.com{color:#6e98ab} span.typ{color:#6dcdcb} span.lit{color:#ffce54} span.pun{color:#e9eded} span.pln{color:#f1f2f3} span.tag{color:#a0d468} span.atn{color:#e0e2e4} span.atv{color:#f2777a} span.dec{color:#e28964} /* 打印样式 */ @media print{ span.str{color:#060} span.kwd{color:#006} span.com{color:#600} span.typ{color:#404} span.lit{color:#044} span.pun{color:#440} span.pln{color:#000} span.tag{color:#006} span.atn{color:#404} span.atv{color:#060} }
点击查看更多配色方案。
往文本编辑器添加代码插入标签
function add_quicktags_custom_button() { if (wp_script_is('quicktags')){ $quicktags_custom_js = <<<'EOT' <script> QTags.addButton('eg_pre_2', '代码块(带行号)', "\n<pre class=\"prettyprint linenums\">", "</pre>\n", '', '预格式化文本标签'); QTags.addButton('eg_pre_1', '代码块', "\n<pre class=\"prettyprint\">", "</pre>\n", '', '预格式化文本标签'); </script> EOT; echo $quicktags_custom_js ."\n"; } } add_action( 'admin_print_footer_scripts', 'add_quicktags_custom_button' );
如需调整按钮顺序,请查看 Quicktags API 文档。
之后要插入代码片段,点击文本编辑器里的添加按钮即可。如果遇到编辑器字符转义问题,切换到可视化模式里粘贴。