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> #include <cstdlib> int main(int argc, char** argv) system("pause"); </pre> </body> |
可见google-code-prettify只需要prettify.js和prettify.css这两个文件就可以运行了。
三、HDwiki模版修改
先确定js文件要存放的位置。比如我是直接将prettify.js放在了js目录下面。
修改/view/default/header.htm，按照2中的方式添加引用。注意如果开启了/wiki/词条名的伪静态，js引用需要用url方式，即
|
1 |
<script type="text/javascript" src="https://wiki.annhe.net/js/prettify.js"></script> |
感觉这个很奇怪，相对目录方式引用在伪静态页面会失效，不知道是什么原因。
四、HDwiki样式文件修改
由于header.htm中只引用了hdwiki.css，所以我们也没必要新建一个样式，直接在这个样式结尾加就可以了。将prettify.css中的代码复制过去。当然还可以根据自己喜好修改一些样式。下面是我修改的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
/*代码显示效果*/ pre.prettyprint { padding: 0px; border: 0px solid #888; font-family: "Courier New" , Courier , monospace; font-size: 10pt; overflow: auto; margin-left: 1%; max-height: 150pt; line-height: 11pt; } .code { margin-left: 4%; width: 90%; border: 1px solid #888; } /* Pretty printing styles. Used with prettify.js. */ /* SPAN elements with the classes below are added by prettyprint. */ .pln { color: #000 } /* plain text */ @media screen { .str { color: #080 } /* string content */ .kwd { color: #008; font-weight: bold;} /* a keyword */ .com { color: #800 } /* a comment */ .typ { color: #606 } /* a type name */ .lit { color: #066 } /* a literal value */ /* punctuation, lisp open bracket, lisp close bracket */ .pun, .opn, .clo { color: #660 } .tag { color: #008 } /* a markup tag name */ .atn { color: #606 } /* a markup attribute name */ .atv { color: #080 } /* a markup attribute value */ .dec, .var { color: #606 } /* a declaration; a variable name */ .fun { color: red } /* a function name */ } /* Use higher contrast and text-weight for printable form. */ @media print, projection { .str { color: #060 } .kwd { color: #006; font-weight: bold } .com { color: #600; font-style: italic } .typ { color: #404; font-weight: bold } .lit { color: #044 } .pun, .opn, .clo { color: #440 } .tag { color: #006; font-weight: bold } .atn { color: #404 } .atv { color: #060 } } /* Put a border around prettyprinted code snippets. */ /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; background: #FFFFFF; } /* IE indents via margin-left */ li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style-type: decimal; color: #bbb;} /* Alternate shading for lines */ li.L1, li.L3, li.L5, li.L7, li.L9 { list-style-type: decimal; background: #eee; } /*代码标题样式*/ .title { background-color:#e0e0e0; padding:2px; font-weight: bold; font-style: italic; } |
五、修改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> "}})}) |
其中，
|
1 |
<div class="title">'+this.langs[g]+'代码'+'</div> |
是在代码开始出添加代码种类说明 this.langs[g]调用代码名称。
去掉了 lang-'+g+'，因为google-code-prettify可以自动判断语言。加上了linenums以显示行号。
好了，到这里就全部修改完成了，下面来看看效果吧~
HDwiki代码高亮
演示地址：http://wiki.annhe.net/wiki/HDwiki%CC%ED%BC%D3%B4%FA%C2%EB%B8%DF%C1%C1
附上我修改好的，保持目录结构，直接覆盖上传即可(基于HDwiki 5.1，其他版本未测试)。
lighter_hdwik
发表回复