为HDwiki添加代码高亮功能

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方式，即

<script type="text/javascript" src="https://wiki.annhe.net/js/prettify.js"></script>

1	<script type="text/javascript" src="https://wiki.annhe.net/js/prettify.js"></script>

感觉这个很奇怪，相对目录方式引用在伪静态页面会失效，不知道是什么原因。
四、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;
}

/*代码显示效果*/

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>
"}})})

其中，

<div class="title">'+this.langs[g]+'代码'+'</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

知行近思

知行合一，切问近思

为HDwiki添加代码高亮功能

发表回复取消回复

相关文章:

发表回复 取消回复

发表回复取消回复