emlog轻量级代码高亮插件prism替换syntaxHighlighter

当前位置:

emlog轻量级代码高亮插件prism替换syntaxHighlighter

作者:邓华锋于2015-9-6发布在 分类:emlog / 阅读2758 次 / 共有0条评论  

三大步走,替换syntaxHighlighter。

1.简单制作prism emlog插件

(1)在http://prismjs.com/download.html 那选择自己喜欢的皮肤,和需要的功能,并下载其js和css

(2)在emlog的content\plugins\目录,新建prism文件夹,并在把js和css放进去,再添加prism.php

代码如下:

 <?php
/*
Plugin Name: 轻量级prism代码高亮插件
Version: Minified
Plugin URL: http://www.denghuafeng.com/post-293.html 
Description:采用轻量级prism代码高亮插件,用于文章中高亮显示代码。
Author: 邓华锋
ForEmlog:5.0.0+
Author Email: denghuafeng@live.cn
Author URL: http://www.denghuafeng.com
*/
!defined('EMLOG_ROOT') && exit('access deined!');

function prism_footer(){
echo '<script type="text/javascript" src="'.BLOG_URL.'content/plugins/prism/prism.js"></script>';
}
addAction('index_footer','prism_footer');

function prism_head(){
echo '<link rel="stylesheet" type="text/css" href ="'.BLOG_URL.'content/plugins/prism/prism.css" />';
}
addAction('index_head','prism_head');

(3)后台启用此插件

2.让后台编辑支持插入prism代码,修改admin/editor/plugins/code/code.js

改为以下:

 /*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/

// google code prettify: http://google-code-prettify.googlecode.com/
// http://google-code-prettify.googlecode.com/

KindEditor.plugin('code', function(K) {
	var self = this, name = 'code';
	self.clickToolbar(name, function() {
		var lang = self.lang(name + '.'),
			html = ['<div style="padding:10px 20px;">',
				'<div class="ke-dialog-row">',
				'<select class="ke-code-type">',
				'<option value="java">Java</option>',
				'<option value="javascript">JavaScript</option>',
				'<option value="css">CSS</option>',
				'<option value="markup">HTML/XML</option>',
				'<option value="sql">SQL</option>',
				'<option value="php">PHP</option>',
				'</select>',
				'</div>',
				'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
				'</div>'].join(''),
			dialog = self.createDialog({
				name : name,
				width : 450,
				title : self.lang(name),
				body : html,
				yesBtn : {
					name : self.lang('yes'),
					click : function(e) {
						var type = K('.ke-code-type', dialog.div).val(),
							code = textarea.val(),
							cls = type === '' ? '' :  '-' + type,
							html = '<pre class="line-numbers"><code class="language' + cls + '">\n' + K.escape(code) + '</code></pre> ';
						if (K.trim(code) === '') {
							alert(lang.pleaseInput);
							textarea[0].focus();
							return;
						}
						self.insertHtml(html).hideDialog().focus();
					}
				}
			}),
			textarea = K('textarea', dialog.div);
		textarea[0].focus();
	});
}); 

3.替换原博文中带有syntaxHighlighter 高亮标签为prism

(1)<pre class="brush:java; toolbar: true; auto-links: false;">

替换为

<pre class="line-numbers"><code class="language-java">

(2)</pre>替换为</code></pre>

sql语句来实现替换:

UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:java; toolbar: true; auto-links: true;">', '<pre class="line-numbers"><code class="language-java">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:java; toolbar: true; auto-links: false;">', '<pre class="line-numbers"><code class="language-java">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:js; toolbar: true; auto-links: false;">', '<pre class="line-numbers"><code class="language-javascript">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:css; toolbar: true; auto-links: false;">', '<pre class="line-numbers"><code class="language-css">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:html; toolbar: true; auto-links: false;">', '<pre class="line-numbers"><code class="language-markup">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:xml; toolbar: true; auto-links: false;">', '<pre class="line-numbers"><code class="language-markup">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:sql; toolbar: true; auto-links: false;">', '<pre class="line-numbers"><code class="language-sql">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '<pre class="brush:shell; toolbar: true; auto-links: false;">', '<pre class="line-numbers"><code class="language-bash">');
UPDATE `emlog_blog` SET `content` = REPLACE(content, '</pre>', '</code></pre>');
按照实际情况去写sql语句吧,完成以上3步,基本上就可以把原来臃肿的syntaxHighlighter高亮插件替换为轻量级prism了,轻,美观,而且功能强大。
  • 标签: emlog 轻量级 制作 prism 代码高亮 插件
  • 该日志于 2015-9-6 11:32 由 邓华锋 发表在 邓华锋 上,你除了可以发表评论外,还可以转载"emlog轻量级代码高亮插件prism替换syntaxHighlighter"日志到你的网站或博客,但是请保留源地址及作者信息,谢谢!!
  • 版权所有:《邓华锋》 => 《emlog轻量级代码高亮插件prism替换syntaxHighlighter
    本文地址:http://dhf.me/post-293.html
    除非注明,文章均为 《邓华锋》 原创,欢迎转载!转载请注明本文地址,谢谢。