Google Code Prettify 非常好用的代码高亮插件 - 文章教程

Google Code Prettify 非常好用的代码高亮插件

发布于 2020-07-15 字数 6064 浏览 1814 评论 0

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>

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0