WordPress 有不少插件可以实现代码高亮,发现了利用Prism.js实现非常漂亮的代码高亮效果,于是就整理了下如何利用实现Prism.js实现非常漂亮的代码高亮效果的方法,在这里买卖易资源网分享给大家!
第一步
打开functions,插入下面的php代码:
//添加代码插入按钮
add_action('admin_init', 'insert_code_button');
function insert_code_button(){
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
add_filter( 'mce_external_plugins', 'add_highlight_button_plugin' );
add_filter( 'mce_buttons', 'register_highlight_button' );
}
function register_highlight_button( $buttons ) {
array_push( $buttons, "|", "highlight" );
return $buttons;
}
function add_highlight_button_plugin(){
$plugin_array['highlight'] = get_bloginfo( 'template_url' ) . '/js/highlight.js';
return $plugin_array;
}
第二步
在主题js文件夹里面,创建highlight.js文件,代码如下:
(function() {
var boxStyle = '.highlighter-code-box {\
background: #F1F1F1;\
position: fixed;\
left: 50% ;\
top: 50% ;\
border: 1px solid #999;\
width: 460px;\
height: 465px;\
margin: -210px 0 0 -230px;\
line-height: 25px;\
border-radius: 3px 3px 0 0;\
z-index:9999;\
}\
.highlighter-code-box-title{\
height: 25px;\
background: #444;\
color: #fff;\
text-align: center;\
vertical-align: baseline;\
font-family: Arial,Verdana;\
font-size: 11px;\
\
}\
.highlighter-code-box-toolbar{\
padding: 5px 15px;\
}\
.highlighter-code-title{\
width: 430px;\
height: 30px;\
font-family: "Courier New", Courier, mono;\
font-size: 20px;\
border: 1px solid #DFDFDF;\
margin: 0 auto;\
display: block;\
resize: none;\
}\
.highlighter-code-ln{\
width: 430px;\
height: 30px;\
font-family: "Courier New", Courier, mono;\
font-size: 17px;\
border: 1px;\
margin: 0 auto;\
display: block;\
resize: none;\
}\
.highlighter-code-input{\
width: 430px;\
height: 310px;\
font-family: "Courier New", Courier, mono;\
font-size: 12px;\
border: 1px solid #DFDFDF;\
margin: 0 auto;\
display: block;\
resize: none;\
}\
.highlighter-code-box-bottombar{\
text-align: right;\
padding: 5px 15px;\
}\
.highlighter-code-box-bottombar input{\
border: 1px solid #BBB;\
margin: 0;\
padding: 0 0 1px;\
font-weight: bold;\
font-size: 11px;\
width: 94px;\
height: 24px;\
color: black;\
cursor: pointer;\
border-radius: 3px;\
background-color: #EEE;\
background-image: -ms-linear-gradient(bottom, #DDD, white);\
background-image: -moz-linear-gradient(bottom, #DDD, white);\
background-image: -o-linear-gradient(bottom, #DDD, white);\
background-image: -webkit-gradient(linear, left bottom, left top, from(#DDD), to(white));\
background-image: -webkit-linear-gradient(bottom, #DDD, white);\
background-image: linear-gradient(bottom, #DDD, white);\
}\
.highlighter-code-box-bottombar input:hover{\
border: 1px solid #555;\
}';
var boxTemplate = '\
<div class="highlighter-code-box-title">插入代码</div>\
<div class="highlighter-code-box-toolbar">\
<label>语言: <select id="codeLanguage">\
</select>\
</label>\
<textarea id="codeTitle" class="highlighter-code-title" placeholder="输入萌萌哒的标题" ></textarea> \
</div>\
<textarea id="codeInput" class="highlighter-code-input" ></textarea>\
<form name="codeLN" class="highlighter-code-ln">\
<label><input id="codeln" type="checkbox" value="显示行号" name="codeln" checked="checked"/>显示行号\
</label>\
</from>\
<div class="highlighter-code-box-bottombar">\
<input id="codeCancelButton" type="button" value="取消">\
<input id="codeInsertButton" type="button" value="插入">\
</div>';
var languages = { //此处可根据不同高亮插件修改成不同的高亮标签
Markup: 'markup',
CSS: 'css',
Clike: 'clike',
JavaScript: 'javascript',
PHP: 'php',
C: 'c',
HTTP: 'http',
Java: 'java',
Nginx: 'nginx',
SQL: 'sql',
None: 'none'
}
var codeBox = {
create: function() {
var styleNode = document.createElement('style');
styleNode.innerHTML = boxStyle;
document.getElementsByTagName('head')[0].appendChild(styleNode);
this._dom = document.createElement('div');
this._dom.setAttribute('class' , 'highlighter-code-box');
this._dom.innerHTML = boxTemplate;
document.body.appendChild(this._dom);
this._init = true;
var that = this;
var language = this.language = document.getElementById('codeLanguage');
var codetitle = this.codetitle = document.getElementById('codeTitle');
var textarea = this.textarea = document.getElementById('codeInput');
var codeln = this.textarea = document.getElementById('codeln');
var cancel = document.getElementById('codeCancelButton');
var insert = document.getElementById('codeInsertButton');
var html = '';
for(var i in languages){
html += '<option value="' + languages[i] + '">' + i + '</option>';
}
language.innerHTML = html;
cancel.onclick = function(){
that.hide();
}
insert.onclick = function(){
var title = codetitle.value;
var text = textarea.value;
var lan = language.value;
var ln = codeln.checked;
var label = language.options[language.selectedIndex].innerHTML;
text = text.replace(/&/g, '&');
text=text.replace(/</g,'<').replace(/>/g, '>');
if(!title){
if(ln){
text = '<pre class="line-numbers"><code class="language-' + lan + '">' + text + '</code></pre>';
}else{
text = '<pre><code class="language-' + lan + '">' + text + '</code></pre>';
}
}else{
if(ln){
text = '<pre class="line-numbers" data-lable="'+ title +'"><code class="language-' + lan + '">' + text + '</code></pre>';
}else{
text = '<pre data-lable="'+ title +'"><code class="language-' + lan + '">' + text + '</code></pre>';
}
}
//上面这句也应该根据不同高亮插件修改不同class格式
that._action && that._action(text);
that.hide();
if(localStorage){
localStorage['lastLanguage'] = lan;
}
}
},
show: function(action) {
if (!this._init) {
this.create();
}
this.textarea.value = '';
this._action = action;
if(localStorage && localStorage['lastLanguage']){
this.language.value = localStorage['lastLanguage'];
}
this._dom.style.display = 'block';
},
hide: function(){
this._action = null;
this._dom.style.display = 'none';
}
};
tinymce.create('tinymce.plugins.highlight', {
init : function(ed, url) {
ed.addButton('highlight', {
title : '代码高亮',
icon : 'code',
onclick : function() {
codeBox.show(function(text){
ed.selection.setContent(ed.selection.getContent()+text);
});
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('highlight', tinymce.plugins.highlight);
})();
里面的语言根据自己的情况修改。
注意:然后在主题的header.php里引用prism.css,footer.php里引用prism.js。
注意事项(必读):
1、本站所展示的一切软件、教程和内容信息等资源均仅限用于学习和研究目的,请在下载后24小时内自觉删除;不保证其完整性及可用性,本平台不提供任何技术支持,若作商业用,请到原网站购买,由于未获授权而发生的侵权行为与本站无关。如有侵权请联系vip#mmeasy.cn(将#替换成@),我们将及时处理。
2、一切网盘资源请勿在线解压!在线解压会提示文件损坏或密码错误,特别注意若压缩包名带part1或z01这样的标识,则均为分卷压缩包,需要下载每个文件夹下的所有压缩包后,用WinRAR软件解压part1或zip即可释放当前文件夹下所有压缩包的内容!
3、如果链接失效,遇到资源失效可提交工单处理。
4、强烈建议在本站注册成为会员后再购买,游客购买只能短期保留记录,如超期或购买后自行清空浏览器缓存,将恢复购买前状态!
本文链接:https://www.mmeasy.cn/484.html