在这记录minecraft的点点滴滴。
  • 首页
  • 笔记
  • 使用highlight.js为xhEditor编辑器增加代码高亮功能

作者:linfengfeiwu2018-2-7 22:45分类: 笔记

最近在修改一个简易博客,后台使用了xhEditor作为编辑器。比较小巧简单,一番折腾后可以使用了,但还少了个代码高亮的功能。

去找相关资料,试了半天还是不行,教程根本无法成功。后来又找到xhEditor的文档,发现demo9给了一个示例,但用的是prettify的代码高亮,这和之前搜到的文章是一样的啊,不会用。之后又开始折腾。

最终终于使用highlight.js成功实现了!下面说说过程。

准备材料:

highlight.js

xhEditor

全部下载他们当前最新的完整包,要用到里面的东西。

先测试了下highlight.js。根据官方文档,在文章页添加以下代码:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
我是直接把代码添加到了文章的模板页面里面,以保证正常加载。前两个在下载的包里找到对应的css和js文件,更改好路径即可。主题文件css可以换自己喜欢的,去官方demo页面预览后选一个就好。


这个弄好后我去后台根据说明直接把

<pre><code class="html">...</code></pre>
这句写在文件里测试,成功的。其中class可以不填或者填入对应语言。测试效果如下:


TIM截图20180208110149.png

代码高亮正常,没有问题。下面就是要整合进xhEditor了。我是研究了demo9好久,删了改改了添的,最终折腾出来了。

首先我们只需要demo9的其中这部分代码:

<style type="text/css">
.btnCode {
	background:transparent url(prettify/code.gif) no-repeat 16px 16px;
	background-position:2px 2px;
}
</style>
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="../xheditor_lang/zh-cn.js"></script>
<script type="text/javascript">
var editor;
$(pageInit);
function pageInit()
{
	var allPlugin={
		
		Code:{c:'btnCode',t:'插入代码',h:1,e:function(){
			var _this=this;
			var htmlCode='<div><select id="xheCodeType"><option value="html">HTML/XML</option><option value="js">Javascript</option><option value="css">CSS</option><option value="php">PHP</option><option value="java">Java</option><option value="py">Python</option><option value="pl">Perl</option><option value="rb">Ruby</option><option value="cs">C#</option><option value="c">C++/C</option><option value="vb">VB/ASP</option><option value="">其它</option></select></div><div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>';			var jCode=$(htmlCode),jType=$('#xheCodeType',jCode),jValue=$('#xheCodeValue',jCode),jSave=$('#xheSave',jCode);
			jSave.click(function(){
				_this.loadBookmark();
				_this.pasteHTML('<pre><code class="'+jType.val()+'">'+_this.domEncode(jValue.val())+'</code></pre>');
				_this.hidePanel();
				return false;	
			});
			_this.saveBookmark();
			_this.showDialog(jCode);
		}}
	};
	editor=$('#elm1').xheditor({plugins:allPlugin});
	
}
function submitForm(){$('#frmDemo').submit();}
</script>

首先最前面那个style要留着,是定义图标的,把demo9文件夹的prettify文件夹里有一个code.gif复制出来按路径放好。然后只需要把var allPlugin这一串复制到对应的文件里,前后都一样的在function里面,editor=前面,很容易找到。最后把plugins:allPlugin插入到xheditor({})的最后,保存,清理浏览器缓存就可以了。

效果如图:

TIM截图20180208110109.png

代码选项那根据highlight.js的语法和自己需要自己调整下就行了,我为了方便直接默认空着让它自动判断了。



温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!
et_highlighter51

已有 0/2330 人参与

发表评论:

欢迎关注本站微信公众号~