Prettify 源代码语法着色使用总结
MathewHanle
9年前
作者：qiujuer
开源库：Genius-Android
========================================================
Prettify 是什么？
Prettify 是一款 HTML 代码高亮插件，可以让你的网站代码显示更具特色。在我的使用中它不是最优秀的，但是却是非常不错的。光说没用要给大家看看才行。
ShowTime
这两个是经过一定自定义后的显示界面，其不用自定义一样好看，自定义一般来说就是更改背景与边框。下面讲讲怎么弄弄；实践出真知。
CodeTIme
1.建立HTML文件，添加 pre 节点，节点中弄些 HTML 代码。
<pre> // 异步方式 // 结果以事件回调方式返回 Command command = new Command("/system/bin/ping", "-c", "4", "-s", "100", "www.baidu.com"); Command.command(command, new Command.CommandListener() { @Override public void onCompleted(String str) { Log.i(TAG, "onCompleted：\n" + str); } @Override public void onCancel() { Log.i(TAG, "onCancel"); } @Override public void onError() { Log.i(TAG, "onError"); } }); </pre> 这时运行：
这个时候是没有任何的样式的，现在开始加入代码美化。
2.首先引入 css 样式和 js ：
<link href="prettify.min.css" rel="stylesheet"> <script src="run_prettify.min.js"></script>
3.然后给 pre 节点加上一个 class 属性：
<pre class="prettyprint lang-java"> ... </pre>prettyprint 的作用是申明使用 Prettify 代码高亮插件，当加上该属性时 Prettify JS 会扫描当前页面包含有该属性的 pre 然后使用代码高亮美化；当然同时也是为了引入对应的css样式。后面的 lang-java 是给 Prettify 插件指定当前 pre 的内容格式， Prettify 将会根据其属性扫描其中对应的节点进行上色。比如 指定 lang-html 那么其将会扫描其中，发现 html body div 等将会进行上色处理，而指定 lang-java 将会更加 Java 的特性进行对应的上色处理。当然其并不是必须的，你可以指定 lang-other 也可以不指定该样式。
现在看看样式咋样;
还不错吧？
当然还可以自定义一定的样式，具体可以修改 css 文件；这里不深入介绍。可以来个简单的，比如边框和背景改改：
这里咱们就直接在 Html 页面使用：
Head 部分加入;
<style> pre.prettyprint { border: 2px dashed #888; background: #ddd; } </style> Show：
这个样式可以了吧？甚至可以背景直接为黑色 这个也是可以的。
到这里其实使用上已经差不多了；不过还有一些其他的东西。
About：
1.在上面引入 JS 的时候;
<script src="run_prettify.min.js"></script>这里使用的是 run_prettify ，其与 prettify 的区别在哪里？
简单来说 run_prettify 就是可以自主触发，在加载完成后自动完成渲染工作。假如使用 prettify JS 我们需要在页面加载完成时调用如下方法：
<script> window.onload = function () { // Load Prettify prettyPrint(); } </script>当然 run_prettify 还会去它的代码托管下载其他的一些 JS 来完成对应的其他语言支持。 2.CDN 加速：
www.bootcdn.cn/prettify/
在这里有最新的 CDN 加速，可以免去把文件 弄到项目中的烦恼，速度也还不错。
值得一说的是，如果有特殊语言 （lang-）支持的话，还需要包含对应的 JS，比如 CSS：
3.最新的源代码和使用的 css 与 JS 打包
绝对官方没有修改过：
4.本次的源码下载：
========================================================
作者：qiujuer
开源库：Genius-Android
========================================================