Google Code Prettify 非常好用的代码高亮插件
prettify 非常小巧且配置简单，使用它来实现代码的高亮显示是个不错的选择。下边我们简单看看 prettify.js 的使用方法。
安装
via Bower
bower install google-code-prettify
or Yeoman
yeoman install google-code-prettify
使用方法
prettify.js 与 AMD 兼容，可以模块化使用。以下是 AMD 模块中的一个示例：
define(['jquery', 'prettify'], function($, prettify){
var code = null;
$('pre').addClass('prettyprint').each(function(idx, el){
code = el.firstChild;
code.innerHTML = prettify.prettyPrintOne(code.innerHTML);
})
);
});这个版本的 Google Code Prettify 定义了一个更灵活的匿名模块。为了让你的AMD加载器找到一个更方便的名称 Google Code Prettify，映射到它的路径如下：
// using RequireJS
require.config({
prettify: 'bower_components/google-code-prettify/prettify'
});
// using curl.js
curl.config({
prettify: 'bower_components/google-code-prettify/prettify'
});或者，它可能只是在如下全局环境中使用：
(function(){
$('pre').addClass('prettyprint');
prettyPrint();
})();使用传统的方式
如果你只想找到 JS 然后引入页面，然后手动调用函数，下面的方法比较适合你
引入 jQuery 文件和 prettify.js 文件
<script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script src="prettify.js" type="text/javascript"></script>
调用 prettify.js 实现代码高亮
在 body 标签上添加调用方法，如下：
<body onload="prettyPrint()"> </body>
将你需要高亮显示的代码片断放在<pre>标记里，如下：
<pre class="prettyprint">
@*你的代码片断*@
</pre>使用 jQuery 小技巧实现优化
上述方法可以实现代码的高亮，但每次手动为<pre>标签添加"prettyprint"类，显示有些麻烦。使用下边的代码片断来解决这个问题并替换掉 body 的"onload"的事件，实现分离：
$(window).load(function(){
$("pre").addClass("prettyprint");
prettyPrint();
})到这我们应该已经成功使用 prettify.js 实现了代码的高亮显示，为了提高页面加载速度，我们应该将引用的 js 文件放置在底部。
特点
一种可嵌入的脚本，它使HTML中的源代码片段更漂亮。
- 适用于HTML页面。
- 即使代码包含嵌入式链接、行号等，也可以工作。
- 简单API：包含一些JS&CSS并添加一个onload处理程序。
- 轻量级：下载量小，在运行时不会阻止页面加载。
- 通过CSS定制样式。
- 支持所有类C语言、类Bash语言和XML语言.不需要指定语言。
- 其他语言的可扩展语言处理程序。您可以指定语言。
- 广泛使用，具有良好的跨浏览器支持。
使用方法2
在文档中包含以下脚本标记：
<script src="prettify.js"></script>将代码片段放入<pre class="prettyprint">...</pre>或<code class="prettyprint">...</code>它会自动打印出来。
<pre class="prettyprint">class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>它适用于哪种语言？
中的评论 prettify.js 虽然是权威的，但Lexer应该在许多语言上工作，包括C和朋友、Java、Python、Bash、SQL、HTML、XML、CSS、JavaScript、Makefile 和 Rust。
它可以很好地工作在 Ruby、PHP、VB 和 Awk 以及 Perl 和 Ruby 的一个不错的子集上，但是由于注释约定，在没有语言扩展的情况下，Smalltalk、OCaml 等就不能工作了。
如果您想为您最喜欢的语言添加一个扩展，请参阅 src/lang-lisp.js 并提交拉请求。
如何指定代码的语言？
您不需要指定语言，因为 PR.prettyPrint() 会猜到的。可以通过指定语言扩展以及 prettyprint Class：
<pre class="prettyprint lang-html">
The lang-* class specifies the language file extensions.
File extensions supported by default include:
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
"xsl".
</pre>您也可以使用 HTML 5 嵌入的公约<code> 元素中的 <pre> 和使用 language-java 风格 Class：
<pre class="prettyprint"><code class="language-java">...</code></pre>如何在代码中插入行号？
您可以使用 linenums 类打开联机编号。如果您的代码没有从行号开始1，您可以将冒号和行号添加到该类的末尾，如 linenums:52 。例如：
<pre class="prettyprint linenums:4"
>// This is line 4.
foo();
bar();
baz();
boo();
far();
faz();
</pre>如何防止标记的一部分被标记为代码？
您可以使用nocode类标识不是代码的标记范围：
<pre class="prettyprint">
int x = foo(); /* This is a comment <span class="nocode">This is not code</span>
Continuation of comment */
int y = bar();
</pre>我怎样才能把行号放在每一行而不是第五行呢？
Comtify将行放入HTML列表元素中，这样行号不会被复制/粘贴捕获，行号由默认样式表中的CSS控制，prettify.css.
下列操作应将其他行的行号重新打开：
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important;
}
</style>相关链接
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论