Wordpress使用Prism.js实现文章代码高亮功能

ivye • • 网建应用 • 423 阅读

1. Prism.js

Prism所支持内容广泛，包括C, Java, PHP, CSS和HTML等所有流行语言，对我个人比较遗憾的是不支持VBA。

加载Prism代码高亮方案很简单，包括Prism.js和对应的CSS样式。在（Prism.js和CSS）下载页面中，依次选择Themes（主题颜色方案）和Languages（目标语言），然后点击下载JS和CSS就好了。

方式1：

将下载来的Prism.js加载如WordPress主题文件js文件夹中，然后在footer.php或header.php中加载：

<link rel="nofollow" target="_blank" href="<?php bloginfo('template_directory'); ?>/css/prism.css" rel="stylesheet" />

<script src="<?php bloginfo('template_directory'); ?>/js/prism.js"></script>

最后一步，就是在后台发布文章的时候使用以下形式就能实现代码高亮的功能。

<code class="language-php">  code_here </code>

提示：
1、language-php中，php可修改任意语言，但必须保留language-，如language-c。
2、如果你想每行代码前带序号，只需要在标签中加<pre class="line-numbers"> 即可。

插入标签按钮

编写文章时手打<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' );

效果如下：

botton

代码插入框

上面的插入方案有个问题，就是只能在文本模式下编辑，对于<，>，&不能自动转义，然而切换到可视化模式粘贴代码又会丢失缩进格式，这里推荐文章 WordPress编辑器TinyMCE添加弹出对话框(dialog)按钮的方法 里的方案，针对prims可以适量修改一下载入框架：

1) 在主题的 js 目录下新建一个 mce_code_plugin.js 文件，把下面代码贴进去：

(function($) {
tinymce.create('tinymce.plugins.specs_code_plugin', {
init: function(editor, url) {
editor.addButton('specs_code_plugin', {
title: "Insert Code", // 鼠标放在按钮上时的提示文字
image: url + '/code.png', // 按钮图标
cmd: 'tdsk_command' // 点击时执行的方法
});
editor.addCommand('tdsk_command', function() {
editor.windowManager.open(
{
title: "Insert Code", // 对话框的标题
file: url + '/mce_code_plugin.htm', // 放置对话框内容的HTML文件
width: 500, // 对话框宽度
height: 400, // 对话框高度
inline: 1 // Whether to use modal dialog instead of separate browser window.
}
);
});
}
});
tinymce.PluginManager.add('specs_code_plugin', tinymce.plugins.specs_code_plugin);

})(jQuery);

2) 再创建一个 mce_code_plugin.htm 的文件（名字要与上面JS中的相同），这个HTML文件里的内容大家可以自己定义，里面内容就是点击按钮后弹出的对话框的内容，我的里面添加了一个代码语言和一个 Textarea 用于粘贴代码，贴进去如下代码：

<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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

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>

3) 把按钮也放到 js 文件夹下（放到其他位置的时候需要修改JS中相关路径）
4) 打开 functions.php ，引入JS并注册按钮。在 funcitons.php 最后面添加下面代码：

function spces_code_plugin() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}

if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'specs_mce_external_plugins_filter' );
add_filter( 'mce_buttons', 'specs_mce_buttons_filter' );
}

}
add_action('admin_head', 'spces_code_plugin');
function specs_mce_external_plugins_filter($plugin_array) {
$plugin_array['specs_code_plugin'] = get_template_directory_uri() . '/js/mce_code_plugin.js';

return $plugin_array;
}
function specs_mce_buttons_filter($buttons) {
array_push($buttons, 'specs_code_plugin');

return $buttons;
}

最后涉及到的文件如下（此处不是代码，只是目录结构）：

Theme Folder/js/
    mce_code_plugin.js
    mce_code_plugin.htm
    code.png
 
Theme Folder/
    functions.php

解决Prism.js对无刷新

方法一：

// Rerun Prism syntax highlighting on the current page
Prism.highlightAll();

由于第一种方法Prism.js需要重新查找新增的DOM节点内容，资源占用相对要高，所以你也可以用第二种方法：
方法二：

// Say you have a code block like this
/**
<pre>
<code class="language-javascript line-numbers">
// This is some random code
var foo = "bar"
</code >
</pre >
**/

// Be sure to select the inner and not the
// Using plain Javascript
var block = document.getElementById('some-code')
Prism.highlightElement(block);

// Using JQuery
Prism.highlightElement($('#some-code')[0]);

方法三：

<script data-no-instant>
InstantClick.on('change', function(isInitialLoad) {
if (isInitialLoad === false) {
// support Prism
if (typeof Prism !== 'undefined') Prism.highlightAll();
}
});
InstantClick.init('mousedown');
</script>

可能会有问题发生，就是我们放进去的代码会被Wordpress自动把半角符号替换为全角，这样带来的问题就是，别人复制你的代码后，无法正常使用。操作方法就是找到我们主题文件的functions.php，打开后在最下面贴上。

//禁止代码标点转换
remove_filter('the_content', 'wptexturize');

方式2：复制以下代码添加到主题 function.php 文件下方即可，一次性搞定。

 //Wordpress免插件实现代码高亮
//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 appthemes_add_quicktags() {
?>
<script type="text/javascript">
QTags.addButton( 'codeHighlight', '代码高亮', '\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' );//修改此段【】为<>
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
//添加快捷键结束
//Pre标签内的HTML不转义
add_filter( 'the_content', 'pre_content_filter', 0 );
function pre_content_filter( $content ) {
return preg_replace_callback( '|【pre.*】【code.*】(.*)【/code】【/pre】|isU' , 'convert_pre_entities', $content );
}//修改此段【】为<>
function convert_pre_entities( $matches ) {
return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}

代码中请注意查看【】里的内容哦。

文章版权归原作者所有或来自互联网，未经允许请勿转载。如有侵权请联系我删除，谢谢！
THE END
分享
二维码
打赏
< <上一篇
下一篇>>