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

复制代码 代码如下:
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/>
<script src="/UploadFiles/2021-04-02/prettify.js">

将<body>改为:

复制代码 代码如下:
<body onload='prettyPrint()'>

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

复制代码 代码如下:
<pre class=”prettyprint”>
/*source code*/

更多演示

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

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

<scripttype="text/javascript"src="/UploadFiles/2021-04-02/jquery-1.6.1.min.js">

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 文件放置在底部

标签:
代码,高亮,着色器

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“prettify 代码高亮着色器google出品”

暂无“prettify 代码高亮着色器google出品”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。