介绍

code prettify 解释为 “代码修饰”。
他由JS代码和CSS代码构成，用来高亮显示HTML页面中的代码。
支持：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等语言。

开始使用

在使用之前我建议将prettify.css中 li 的样式中添加：list-style-type:decimal 使得每行都有行号，而不是每5行有一个号。
加入主要的CSS文件和JS文件：

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

在<body>标签中加入οnlοad="prettyPrint();"

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

将代码放在<pre class="prettyprint linenums">标签内，其中 linenums 表示为代码添加行号，可以不写。
注意：像html中的特殊字符需要转义，比如<a>应该写成 &lt a &gt

例子

代码主题选择

默认在prettify中有5种选择：

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

比如你想使用sunburst.css，则我们只需要将：

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

替换成

<link rel="stylesheet" href="css/sunburst.css" />

扩展样式可以从 http://jmblog.github.io/color-themes-for-google-code-prettify/ 、http://stanleyhlng.com/demo/?url=http%3A%2F%2Fdemo.stanleyhlng.com%2Fprettify-js%2F&surl=http%3A%2F%2Fstanleyhlng.com%2Fprettify-js%2F下载。

语言支持

prettify默认支持类C语言（如java等）等，我们可以通过添加额外的JS文件来使得prettify支持该语言的代码高亮（额外的JS文件从此处下载）。比如添加 lang_go.js 并<pre class="prettyprint lang_go">可以使得支持go语言。

参考文献

[1] 官方文档：http://google-code-prettify.googlecode.com/svn/trunk/README.html

[2] 扩展的Prettify主题CSS样式：http://jmblog.github.io/color-themes-for-google-code-prettify/

[3] 代码格式化工具：http://tool.oschina.net/codeformat

转载于:https://www.cnblogs.com/xiazdong/p/3575693.html

五、Google Code Prettify：实现代码高亮的JS库相关推荐

kindeditor4.x整合SyntaxHighlighter代码高亮
文章来源:https://my.oschina.net/duwaiweb/blog/74613 kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提 ...
博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)...
前言在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于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 ...
GitHub, Google Code, and other
http://antkillerfarm.github.io/ GitHub 2014.12 自从最近google code日益难以访问以来,我就一直在思考着替代的方案.然后在大徐的blog的指引之下 ...
google code 免费svn服务器使用说明
转载:http://zhaoningbo.iteye.com/blog/1122225 引言: 写代码的我们,经常有一些精髓的代码想保存下来,方便用的时候翻阅.要是能放在网上,随时在有网的地方查看就好 ...
个人网站搭建（Day 8）— Django-simditor的使用以及代码高亮
Django-simditer富文本编辑器的使用我们在博客个人网站搭建(Day 4)- My second app:blog 中提及我们改用富文本编辑器来编辑博文,今天我们就介绍一下富文本编辑器 ...

五、Google Code Prettify：实现代码高亮的JS库

介绍

开始使用

例子

代码主题选择

语言支持

参考文献

五、Google Code Prettify：实现代码高亮的JS库相关推荐

最新文章

热门文章