为了将代码与文章其他内容区分开来,并且提高代码的可读性,一般会将代码设置高亮。在WordPress后台插件选项卡处,以highlight
为关键字能搜索出很多相关的插件,但好用的很少。其中Crayon Syntax Highlighter这款插件用户很多,用了一段时间后我觉得并不好用,主要是后台样式自定义选项很混乱,于是选择了Prism。
1. Prism.js
Prism所支持内容广泛,包括C
, Java
, PHP
, CSS
和HTML
等所有流行语言,对我个人比较遗憾的是不支持VBA
。
加载Prism代码高亮方案很简单,包括Prism.js和对应的CSS样式。在(Prism.js和CSS)下载页面中,依次选择Themes(主题颜色方案)和Languages(目标语言),然后点击下载JS和CSS就好了。
将下载来的Prism.js加载如WordPress主题文件js文件夹中,然后在footer.php中加载:
<script src="<?php bloginfo('template_directory'); ?>/js/prism.js"></script>
对应的CSS文件可以直接复制粘贴到style.css文件中,或者单独加载也可以。
2. 使用Prism.js实现高亮
Prism使用起来计较简单,编辑文章时通过形如<pre class=" language-*"><code class=" language-*">代码内容</code></pre>
这种形式来实现,具体可以参见官方的示例页面:examples。
3. 自定义按钮
a. 插入标签按钮
编写文章时手打<pre class=" language-*"><code class=" language-*">
太麻烦,而且容易出错,可以在WordPress默认编辑器上添加按钮,按钮的插入可以更具自身需求来添加,WP的官方API文档中将的很详细:Quicktags_API,下面是我自己添加的几个:
// 自定义按钮
function appthemes_add_quicktags() {
if (wp_script_is('quicktags')){
?>
<script type="text/javascript">
QTags.addButton( 'eg_hlAll', '*ALL', '<pre class="language-"><code class="language-">', '</code></pre>', 'h', 'defual highlight');
QTags.addButton( 'eg_hlHTML', '*HTML', '<pre class="language-markup"><code class="language-markup">', '</code></pre>', 'z', 'HTML highlight');
QTags.addButton( 'eg_hlJava', '*Java', '<pre class="language-Java"><code class="language-Java">', '</code></pre>', 'h', 'Java highlight');
</script>
<?php
}
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );
效果如下:
b. 代码插入框
上面的插入方案有个问题,就是只能在文本模式下编辑,对于<
,>
,&
不能自动转义,然而切换到可视化模式粘贴代码又会丢失缩进格式,这里推荐文章 WordPress编辑器TinyMCE添加弹出对话框(dialog)按钮的方法 里的方案,针对prims可以适量修改一下载入框架:
<html>
<head>
<!-- Disable browser caching of dialog window -->
<meta http-equiv="Content-Type" content="text/html, charset=UTF-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<style type='text/css'>
body {
font-family: sans-serif;
font-size: 1.1em;
background-color: #F1F1F1;
color: #222;
}
.codeArea {
margin: 10px auto;
text-align: center;
}
textarea {
margin-top: 10px;
width: 100%;
height: 300px;
}
</style>
<script>
function htmlEntities(str) {
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function InsertValue() {
codeNode = document.getElementById('code')
code = codeNode.value;
if(code == '') {codeNode.focus(); return;}
lang = document.getElementById('lang').value;
code = "<pre class='language-" + lang + "'><code class='language-" + lang + "'>" + htmlEntities(code) + "</code></pre>";
window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, code); //获取内容并插入到编辑器
window.parent.tinyMCE.activeEditor.windowManager.close(); //关闭对话框
}
</script>
</head>
<body>
<form onsubmit="InsertValue();return false;">
<div class="codeArea">
<label for="lang">代码语言</label>
<select id="lang">
<option value="java">Java</option>
<option value="html">html</option>
<option value="css">css</option>
<option value="php">php</option>
<option value="js">js</option>
<option value="markup">markup</option>
</select>
<textarea id="code" autofocus></textarea>
<p><input type="submit" value="Insert" /></p>
</div>
</form>
</body>
</html>
没有评论