Prettify: 轻松为你的项目增加程序代码语法高亮

by Slacken

at 2011-08-01 21:21:56

original http://item.feedsky.com/~feedsky/heikezhi/~8608072/547688281/6713895/1/item.html

一、下载源代码

你可以在这里下载实现语法高亮的源文件.

二、将src目录放到你的项目目录中

我一般把这个目录重命名为highlighter。不要删除里面的任何东西，除非你确信以后不会使用到支持特定语言的JavaScript文件。

三、导入必要的文件

在你的HTML中，导入这两个文件：prettify.css和prettify.js。

<!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>

注意我们是把脚本文件放在页面的底部，恰好在body标签关闭之前。这通常是很巧妙的办法，因为这样做能提高性能。
接下来就是使其运行。语法高亮插件会搜索class为prettyprint的pre或者code标签。

<pre class="prettyprint">
(function() {
   var jsSyntaxHighlighting = 'rocks';
})();
</pre>

四、调用prettyPrint()函数

最后一步就是执行prettyPrint()函数。我们将<script>prettyPrint();</script>同样放在页面底部。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>untitled</title>
   <link rel="stylesheet" href="highlighter/prettify.css" />
</head>
<body>

<pre class="prettyprint">
(function() {
   var jsSyntaxHighlighting = 'rocks';
})();
</pre>
<script src="highlighter/prettify.js"></script>
<script>prettyPrint();</script>
</body>
</html>

如果在浏览器中看到如下页面（就说明成功了）。

就是这样简单。但是，如果你想更改语法高亮的主题，还有最后额外的一个步骤。你还得编辑CSS文件。庆幸的是，在主题库有很多CSS主题可供你免费使用。个人而言我喜欢用Desert主题。要应用它，要把上面链接页面的CSS复制下来，新建一个样式表，再粘贴到里面去。然后在HTML的head中引入这个样式表。

<head>
   <meta charset="utf-8">
   <title>untitled</title>
   <link rel="stylesheet" href="highlighter/dessert.css" />
</head>

老实说，有比这还简单的吗？
—————————
译自：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

想和我们一道传播黑客精神？快来加入吧！

无觅猜您也喜欢：
GitHub:改变开发者的工作方式，让代码分享更简单	代码中最重要的并不是代码	不喜欢8小时外写代码的就不是好开发？	GNU/Linux中有多少GNU的代码？
无觅

Google Reader