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方式，即
感觉这个很奇怪，相对目录方式引用在伪静态页面会失效，不知道是什么原因。
四、HDwiki样式文件修改
由于header.htm中只引用了hdwiki.css，所以我们也没必要新建一个样式，直接在这个样式结尾加就可以了。将prettify.css中的代码复制过去。当然还可以根据自己喜好修改一些样式。下面是我修改的：
/*代码显示效果*/
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> "}})}) |
其中，
'+this.langs[g]+'代码'+'
是在代码开始出添加代码种类说明 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
发表回复