java语言

如何使用Google-Code-Prettify 实现代码高亮功能

时间:2025-02-22 23:22:26 java语言 我要投稿
  • 相关推荐

如何使用Google-Code-Prettify 实现代码高亮功能

  导语:如何使用Google-Code-Prettify 实现代码高亮功能,为了方便大家的练习,下面是小编给大家提供的使用方法,大家可以参考阅读,更多详情请关注应届毕业生考试网。

  prettify.js 的使用方法:

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

  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

  <script src="prettify.js"type="text/javascript"></script>

  <link href="/prettify.css" type="text/css" rel="stylesheet" />

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

【如何使用Google-Code-Prettify 实现代码高亮功能】相关文章:

使用Dreamweaver代码提示功能08-05

使用python实现Linux异步epoll的代码04-16

如何使用JS实现短信发送倒计时功能02-17

PHP中如何实现crontab代码05-30

PHP简单留言本功能的实现代码08-13

Dreamweaver代码提示功能使用方法05-21

如何使用dreamweaver的模板功能05-30

php代码如何实现命令行执行05-19

php使用cookie实现记住用户名和实现代码04-04