WordPress 轻量简单的代码高亮

兼容标准的 Google Code Prettify 代码高亮主题&插件的格式，基于 Google Code Prettify 高亮代码的方案，纯代码版。

代码语言：javascript复制

//首先头部加载样式
function prettify_head() {
echo '<style type="text/css">.prettyprint,pre.prettyprint{white-space:pre-wrap;word-wrap:break-word;background-color:#444;border:1px solid #272822;overflow:hidden;padding:0;margin:20px 0;font:14px/20px "courier new";color:#666;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.prettyprint.linenums,pre.prettyprint.linenums{-webkit-box-shadow:inset 40px 0 0 #39382e,inset 41px 0 0 #464741;-moz-box-shadow:inset 40px 0 0 #39382e,inset 41px 0 0 #464741;box-shadow:inset 40px 0 0 #39382e,inset 41px 0 0 #464741}.prettyprint.linenums ol,pre.prettyprint.linenums ol{margin:0 0 0 33px}.prettyprint.linenums ol li,pre.prettyprint.linenums ol li{color:#bebec5;line-height:20px;margin-left:0;list-style:decimal}.prettyprint ol.linenums{margin-bottom:0;background-color:#272822;padding:0}.prettyprint .com{color:#93a1a1}.prettyprint .lit{color:#ae81ff}.prettyprint .pun,.prettyprint .opn,.prettyprint .clo{color:#f8f8f2}.prettyprint .fun{color:#dc322f}.prettyprint .str,.prettyprint .atv{color:#e6db74}.prettyprint .kwd,.prettyprint .tag{color:#f92659}.prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var{color:#a6e22e}.prettyprint .pln{color:#66d9ef}</style>';
}
add_action('wp_head', 'prettify_head');
 
//强制兼容<pre>,和下面转义代码搭配使用
function g_prettify_replace($text)
{
$replace = array(
'<pre>' => '<pre class="prettyprint">',
);
$text = str_replace(array_keys($replace), $replace, $text);
return $text;
}
add_filter('content_save_pre', 'g_prettify_replace');
add_filter('the_content', 'g_prettify_replace');
 
//强制阻止WordPress代码转义,适用于<pre class="prettyprint linenums"> </pre>
function g_esc_html($content)
{
$regex = '/(<pres [^>]*?classs*?=s*?[",'].*?prettyprint.*?[",'].*?>)(.*?)(</pre>)/sim';
return preg_replace_callback($regex, 'g_esc_callback', $content);
}
function g_esc_callback($matches)
{
$tag_open = $matches[1];
$content = $matches[2];
$tag_close = $matches[3];
$content = esc_html($content);
return $tag_open . $content . $tag_close;
}
add_filter('the_content', 'g_esc_html', 2);
add_filter('comment_text', 'g_esc_html', 2);
 
//页脚加载javascript文件
function prettify(){
?>
<?php if( is_single() ){?><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/prettify/r298/prettify.js"></script><?php } ?>
<?php
}
add_action('get_footer','prettify');
 
//后台编辑器添加按钮
function prettify_bottom($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'kkpre', 'G-Prettify', '<pre class="prettyprint linenums" >nn</pre>', "" );//添加高亮代码
QTags.addButton( 'i</>', '</>', "&lt;", "&gt;" );
</script>
<?php
}
add_action('after_wp_tiny_mce', 'prettify_bottom');
?>

从可视化编辑器选择块-格式化添加代码，或者选择文本编辑器，点击 G-Prettify 按钮，添加代码，即可使得被添加代码实现高亮模式

wordpress 玩转wordpress

0 人点赞