HTMer » 编程开发 » 网页中使用google-code-prettify来让代码高亮显示的方法

网页中使用google-code-prettify来让代码高亮显示的方法

我们在写一些网页技术性的文章时,往往会贴出一些网页代码出来,但是如果不加CSS处理,直接显示在网页的话可读性就很差,所以今天就教大家利用google-code-prettify来让代码高亮显示的方法。

首先第一步去下载google-code-prettify,下载地址为:http://code.google.com/p/google-code-prettify/downloads/list

一般下载最新的带small版本的就可以了,表示压缩版,体积小。

下载后解压,会发现里有很多的JS文件和一个CSS文件,不用管他,找出两个文件,分别是:prettify.cssprettify.js(说明:其他的JS文件是干什么用的,细心的朋友不难发现,里面都是用各种程序语言命名的JS文件,如lang-css.js,不难发现这个JS就是只对CSS代码高亮显示的意思,而prettify.js是对所有语言的高亮显示。)

然后在网页中引用prettify.cssprettify.js,然后在body标签中添加一个onload事件,代码如下:<body onload="prettyPrint()">

最后将需要高亮显示的代码放在pre标签中,代码如下:<pre class="prettyprint">这里贴出你所要显示的代码</pre>,代码中的样式类prettyprint的意思就是让pre标签中的代码高亮显示,如果要显示行号可以在class中添加linenums类,但是我发现google-code-prettify显示行号有问题,有时显示有时不显示,而且显示的时候只显示5的整数倍行号,非要显示行号的话需要配合前端设计框架Bootstrap,这里不详细说了。

具体的利用google-code-prettify来让代码高亮显示的代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页中使用google-code-prettify来让代码高亮显示的方法-HTMer</title>
<link href="prettify.css" rel="stylesheet" type="text/css">
<script src="prettify.js"></script>
</head>
<body onload="prettyPrint()">
<pre class="prettyprint">这里贴出你所要显示的代码</pre>
</body>
</html>
顶一下 ▲()   踩一下 ▼()

相关文章