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

jjfat

浏览: 283828 次
性别:
来自: 北京

最近访客更多访客>>

gdtiti

wqp310520

Csupport

jihong10102006

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

分享一个帮助你迅速生成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

分享到：

分享一款强大的jQuery旋转轮播式插件 - Car ... | 分享使用jQuery和CSS实现的一个超酷缩略图 ...

2012-01-10 11:58
浏览 847
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

主要特性：

如何使用？

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

主要特性：

如何使用？

评论

发表评论

相关推荐

最近访客更多访客>>