Google Code Prettify 实现代码高亮

最新推荐文章于 2024-07-12 09:51:03 发布

熊猫家族

最新推荐文章于 2024-07-12 09:51:03 发布

阅读量1k

点赞数

分类专栏：研发 Web 文章标签： google Google jquery jQuery JQUERY Jquery JQuery Prettify web Web WEB

本文链接：https://blog.csdn.net/a280606790/article/details/8264276

版权

研发同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Web

11 篇文章 0 订阅

订阅专栏

Google Code Prettify 实现代码高亮

Posted 2012-11-13 | 分类: JavaScript

prettify

Prettify提供一个Javascript模块和CSS 文件,可以在HTML页面中显示源代码的代码高亮效果。这是用于code.google.com的脚本。

语法

<pre class="prettyprint" id="language">
@*你的代码片断*@
</pre>

常用的语言

将id的language改成以下的语言：

“bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, ”xhtml”, “xml”, “xsl”

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"的事件，实现分离：

<script type="text/javascript">
$(window).load(function(){
    $("pre").addClass("prettyprint");
    prettyPrint();
})
</script>

到这我们应该已经成功使用 prettify.js 实现了代码的高亮显示，为了提高页面加载速度，我们应该将引用的 js 文件放置在底部，大家可以参考下本站的放置方法。

DEMO JAVA代码高亮显示


   
   package foo;
 
import java.util.Iterator;
 
/**
 * the fibonacci series implemented as an Iterable.
 */
public final class Fibonacci implements Iterable<Integer> {
  /** the next and previous members of the series. */
  private int a = 1, b = 1;
 
  @Override
  public Iterator<Integer> iterator() {
    return new Iterator<Integer>() {
      /** the series is infinite. */
      public boolean hasNext() { return true; }
      public Integer next() {
        int tmp = a;
        a += b;
        b = tmp;
        return a;
      }
      public void remove() { throw new UnsupportedOperationException(); }
    };
  }
 
  /**
   * the n<sup>th</sup> element of the given series.
   * @throws NoSuchElementException if there are less than n elements in the
   *   given Iterable's {@link Iterable#iterator iterator}.
   */
  public static <T>
  T nth(int n, Iterable<T> iterable) {
    Iterator<? extends T> it = iterable.iterator();
    while (--n > 0) {
      it.next();
    }
    return it.next();
  }
 
  public static void main(String[] args) {
    System.out.print(nth(10, new Fibonacci()));
  }
}

个人博客：http://demi-panda.com

熊猫家族

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Google Code Prettify 实现代码高亮

Google Code Prettify 实现代码高亮Posted 2012-11-13 | 分类: JavaScript prettify Prettify提供一个Javascript模块和CSS 文件,可以在HTML页面中显示源代码的代码高亮效果。这是用于code.google.com的脚本。语法 class="prettyp
复制链接

扫一扫

专栏目录