Google Code Prettify，代码高亮的JS库

一、code-prettify介绍

1.prettify.js是Google的一款代码高亮插件。

2.他又js代码和css代码构成，用来高亮显示HTML页面中的源代码。

3.支持：C, Java, Python, Bash, HTML, XML, Javascript, Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, LLVM, Lua, Matlab, Pascal, R, Scala, SQL, LaTeX等语言。

4.Git地址： https://github.com/google/code-prettify

CDN地址：http://www.bootcdn.cn/prettify/

二、使用示例

默认在prettify中有5种选择：

prettify.css
sunburst.css
desert.css
doxy.css
sons-of-obsidian.css

1.引用css和js

<link rel="stylesheet" href="css/prettify.css" /> <!-- 设置代码主题，此文件为默认主题，你可以换成其他主题--><script src="js/prettify.js" type="text/javascript"></script>

2.在页面加载成功，执行处理

<body οnlοad="prettyPrint()">

3.多行使用pre标签，当行可以使用code标签

    <pre class="prettyprint  linenums ">
var express = require('express');
var app = express();
app.use('/view2', express.static('view2'));
app.use('/view3', express.static('view3'));
app.use('/view4', express.static('view4'));
app.use('/view5', express.static('view5'));var server = app.listen(3001, 'localhost', function () {var host = server.address().address;var port = server.address().port;console.log('Server is running at http://%s:%s', host, port);
});</pre>

结果预览：

默认样式如下：

注意：

1.在使用之前我建议将prettify.css中 li 的样式中添加：list-style-type:decimal 使得每行都有行号，而不是每5行有一个号。
2.将代码放在<pre class="prettyprint linenums">标签内，其中 linenums 表示为代码添加行号，可以不写。
3.注意：像html中的特殊字符需要转义，比如<a>应该写成 &lt a &gt

jquery.fly.js实现添加购物车效果、实现抛物线运动

RequireJS实例

echarts(国产)基于html5-canvas的开源图表绘制组件

Google Code Prettify，代码高亮的JS库相关推荐

如何配置html prettify,[HTML] Prettify 代码高亮使用总结
======================================================== 作者:qiujuer 网站: 转载请注明出处:外链网址已屏蔽 ============ ...
从 Google Code 迁移代码到 GitHub 上
从Google Code迁移代码到github上的步骤: 首先访问 https://github.com/nirvdrum/svn2git 安装svn2git工具. 创建一个空白目录,进入该目录执行 ...
博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)...
前言在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...
在博客园添加Lisp(或其它)代码高亮
由于我这一段对Emacs很有兴趣,发了不少关于这玩意儿的文章.但博客园的代码高亮并不支持Emacs Lisp,之前一直也没怎么管,前几天看见李杀的这篇 Syntax Coloring with Goo ...
javascript实现代码高亮
9款有用的Javascript代码高亮脚本 Syntax highlighting is very important especially when we want to show our code ...
zbbz的lisp_在博客园添加Lisp(或其它)代码高亮
由于我这一段对Emacs很有兴趣,发了不少关于这玩意儿的文章.但博客园的代码高亮并不支持Emacs Lisp,之前一直也没怎么管,前几天看见李杀的这篇 Syntax Coloring with Goo ...
9款有用的Javascript代码高亮脚本
原文:9款有用的Javascript代码高亮脚本译自:webdesignbooth 转自:http://www.qianduan.net/9-useful-javascript-syntax-hig ...
谈谈iceCode代码高亮插件的开发问题，由我们国人开发代码高亮插件！
做为一名资深的开发者,有时候再写一些技术性的文章时,常常需要使用代码高亮插件来展示自己的代码,大家都知道SyntaxHighlighter.Google Code Prettify.Highlight ...
个人网站搭建（Day 8）— Django-simditor的使用以及代码高亮
Django-simditer富文本编辑器的使用我们在博客个人网站搭建(Day 4)- My second app:blog 中提及我们改用富文本编辑器来编辑博文,今天我们就介绍一下富文本编辑器 ...
开源，选择Google Code还是Sourceforge【转】
开源,选择Google Code还是Sourceforge [转:http://www.cnblogs.com/chenlulouis/archive/2009/12/18/1627201.html] ...

Google Code Prettify，代码高亮的JS库

Google Code Prettify，代码高亮的JS库相关推荐

最新文章

热门文章