如何在你的页面加入'代码皮肤'.

今天读到一篇很好的工具介绍篇, 没有什么太大的技术含量, 偏于实用性多一些.

不过还是建议想'进阶'的jser、多看看它的源码！进行一次源码分析是最好的对以后自己的项目也可能会用到其实现方式!

来自Jeffrey “How to Add Syntax Highlighting to Any Project” 建议去看原文.

==================== Enein 工具篇 ====================

第一步:

　　点击这里下载

如何在你的页面加入'代码皮肤'.

这里windows用户不用担心直接解压就可以.

如何在你的页面加入'代码皮肤'.

解压后我们只需要src下的所有文件.

新建个目录"highlighting"把src里的所有文件全部copy进去.

写一个“highlighting.htm”页面

<!DOCTYPE html>
 
<html lang="en">
<head>
   <meta charset="utf8">
   <title>highlighting_test_for_Enein</title>
   <link rel="stylesheet" href="highliting/prettify.css" />
</head>
<body>
 
<script src="highliting/prettify.js"></script>

<pre>
/* 测试代码 */
(function() { 
   var jsSyntaxHighlighting = 'rocks';
})()
</pre>

</body>
</html>

导入两个主要的文件.

预览

如何在你的页面加入'代码皮肤'.

在chrome下预览效果.

然后我们加入代码将<pre> 里内容修改

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

<script>prettyPrint();</script>

主要代码在"prettyPrint"方法. 在css默认直接是写"prettyprint" 之后的 linenums:1是只显示行号的初始值.以上<pre>里的代码你copy多个就会看到效果.

如何在你的页面加入'代码皮肤'.

如果想这里的css是默认的皮肤. 想换皮肤可以进入 googleCode的svn地址 here

如何在你的页面加入'代码皮肤'.

单击任何一个你喜欢的风格将其css, copy到本地文件里. 在Html里替换css即可.

我替换了"Sons-Of-Obsidian" 效果如下:

如何在你的页面加入'代码皮肤'.

希望能对大家有所帮助. 在原文里有其视频, 如果不能观看的请看我的“想上FackBook、Twitter、G+... 国外网站嘛... 来FQ吧.”这篇文章. 如果对你有帮助请"推荐"给你的朋友.

==================== Enein end ====================

如何在你的页面加入'代码皮肤'.