为HDwiki添加代码高亮功能

未经许可,禁止转载。
本文链接地址: https://www.annhe.net/article-1322.html

HDwiki的插入代码功能不完善,看格式和google-code-prettify一样,比如插入php代码:

<pre class=”prettyprint lang-php”>php代码</pre>

可是并没有提供google-code-prettify的相关高亮库文件。所以保存之后没有效果。
自行添加google-code-prettify的方法(基于HDwiki 5.1版本)。
一、下载code-prettify
项目主页:http://code.google.com/p/google-code-prettify/
SVN检出:http://google-code-prettify.googlecode.com/svn/trunk/

二、了解code-prettify使用方法
要使用google-code-prettify,需要在head中引用高亮js文件和样式文件,在body标签中加入onload=”prettyPrint(); adjustHeightInParent()”。google-code-prettify可以自动判断语言,支持加行号(只需在pre样式中添加linenums即可)。下面是一个完整的示例:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<link href=”src/prettify.css” type=”text/css” rel=”stylesheet” />
<script type=”text/javascript” src=”src/prettify.js”></script>
<script type=”text/javascript”>prettyPrint();</script>
<title>a test page</title>

</head>
<body onload=”prettyPrint(); adjustHeightInParent()”>
<pre class=”prettyprint linenums”>
/*
* File: main.cpp
* Author:
*
* Created on 201年月日, :
*/

#include <cstdlib>
#include <iostream>
using namespace std;

int main(int argc, char** argv)
{

system(“pause”);
return 0;
}

</pre>

</body>
</html>

可见google-code-prettify只需要prettify.js和prettify.css这两个文件就可以运行了。

三、HDwiki模版修改
先确定js文件要存放的位置。比如我是直接将prettify.js放在了js目录下面。
修改/view/default/header.htm,按照2中的方式添加引用。注意如果开启了/wiki/词条名的伪静态,js引用需要用url方式,即

感觉这个很奇怪,相对目录方式引用在伪静态页面会失效,不知道是什么原因。
四、HDwiki样式文件修改
由于header.htm中只引用了hdwiki.css,所以我们也没必要新建一个样式,直接在这个样式结尾加就可以了。将prettify.css中的代码复制过去。当然还可以根据自己喜好修改一些样式。下面是我修改的:

五、修改HDwiki编辑器
修改/js/jqeditor/jqeditor-hdwiki-1.0.3.min,查找

return'<pre class=”prettyprint lang-‘+g+'”>’+f+”</pre>”}})})

替换为:

return ‘<div class=”code”>
<div class=”title”>’+this.langs[g]+’代码’+'</div>
‘+'<pre class=”prettyprint linenums”>;’+f+”</pre></div>
“}})})

其中,

是在代码开始出添加代码种类说明 this.langs[g]调用代码名称。
去掉了 lang-‘+g+’,因为google-code-prettify可以自动判断语言。加上了linenums以显示行号。
好了,到这里就全部修改完成了,下面来看看效果吧~

HDwiki代码高亮

HDwiki代码高亮

演示地址:http://wiki.annhe.net/wiki/HDwiki%CC%ED%BC%D3%B4%FA%C2%EB%B8%DF%C1%C1
附上我修改好的,保持目录结构,直接覆盖上传即可(基于HDwiki 5.1,其他版本未测试)。
lighter_hdwik



未经许可,禁止转载。
本文链接地址: https://www.annhe.net/article-1322.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注