Google的代码高亮着色器prettify如何用

admin
admin
admin
343
文章
75
评论
2022年1月30日10:08:03
评论
48

prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,最值得亮点的地方是不需要指明代码的语言类型,它会自动进行判断。

google-code-prettify 需要两个文件,prettify.js和prettify.css,把这两个放到 head 模板中即可。

在<head></head>标签之间加入这两行代码:

<link rel="external nofollow" target="_blank" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css"  rel="stylesheet" type="text/css"/>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"/>

将<body>改为:

<body onload='prettyPrint()'>

将需要着色的代码写入以下形式的<pre></pre>标签之中:

<pre class="prettyprint">
/*source code*/

今天这篇文章主要讲述使用 google-code-prettify 来实现代码的高亮显示,以前我使用 highlight.js 来实现文章中代码的高亮显示。 prettify 非常小巧且配置简单,使用它来实现代码的高亮显示是个不错的选择。下边我们简单看看 prettify.js 的使用方法:

1、引入 jQuery 文件和 prettify.js 文件

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script src="prettify.js" type="text/javascript"></script>

2、调用 prettify.js 实现代码高亮

在 body 标签上添加调用方法,如下:

<body onload="prettyPrint()">
</body>将你需要高亮显示的代码片断放在<pre>标记里,如下:
<pre class="prettyprint">
  @*你的代码片断*@
</pre>

使用 jQuery 小技巧实现优化

上述方法可以实现代码的高亮,但每次手动为<pre>标签添加"prettyprint"类,显示有些麻烦。使用下边的代码片断来解决这个问题并替换掉 body 的"onload"的事件,实现分离:

$(window).load(function(){
   $("pre").addClass("prettyprint");
   prettyPrint();
})

到这我们应该已经成功使用 prettify.js 实现了代码的高亮显示,为了提高页面加载速度,我们应该将引用的 js 文件放置在底部

admin
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: