首页风格
门户
博客

分享一个帮助你迅速生成web页面源代码语法高亮的类库 - Google Code Prettify

日期:2012/01/09  来源:GBin1.com

分享一个帮助你迅速生成web页面源代码语法高亮的类库 - Google Code Prettify gbin1.com

在线演示  本地下载

今天分享一个帮助你迅速生成页面代码语法高亮的类库:Google Code Prettify

主要特性:

  • 能够运行在HTML页面上
  • 即使代码中含有链接,行号也可以正确运行
  • 简单的API : 包含JS和CSS,并且拥有一个onload句柄
  • 轻量级: 下载迅速,并且不会影响页面加载和运行
  • 通过CSS自定的样式. 查看 主题gallery
  • 支持所有的C-like, Bash-like, and XML-like languages.不需要指定任何语言
  • 对于其它语言扩展语言处理,你可以指定语言
  • 跨浏览器支持, code.google.com 和 stackoverflow.com都使用这个类库

如何使用?

第一步:下载代码 http://code.google.com/p/google-code-prettify/

第二步:引入相关代码

<!DOCTYPE html>
 
<html lang="en">
<head>
   <meta charset="utf&mdash;8">
   <title>untitled</title>
   <link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>
 
<script src="highlighter/prettify.js"></script>
 
</body>
</html>

第三步:在需要高亮支持的<pre>和<code>标签中添加class="prettyprint",如下:

<pre class="prettyprint">
(function() {
   var jsSyntaxHighlighting = 'rocks';
})();
</pre>

第四部:调用相关prettyPrint方法,如下:

<script>prettyPrint();</script> 

第五步:当然,你可以添加你喜欢的样式,如下:

<link rel="stylesheet" href="highlighter/dessert.css" />

来源: 分享一个帮助你迅速生成web页面源代码语法高亮的类库 - Google Code Prettify

喜欢我们的文章请您与朋友分享:

?ü?à

留言

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com


  1. 倡萌

    这个和现在很多的高亮插件貌似差不多,都是一个css和一个JS文件
    2012-1-11 上午11:01
今日推荐