HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« 如何取消百度分享中的划词分享功能NETCRAFT Web服务器架构排行榜 »

网页中使用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>


欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/1005.htm

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version