码迷,mamicode.com
首页 > Web开发 > 详细

[HTML] Prettify 代码高亮使用总结

时间:2014-11-24 10:01:37      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:google-code-prettify   prettify   代码高亮   pre代码高亮   

========================================================

作者:qiujuer

博客:blog.csdn.net/qiujuer

网站:www.qiujuer.net

开源库:Genius-Android

========================================================

Prettify 是什么?

Prettify 是一款 HTML 代码高亮插件,可以让你的网站代码显示更具特色。在我的使用中它不是最优秀的,但是却是非常不错的。光说没用要给大家看看才行。

ShowTime

bubuko.com,布布扣

bubuko.com,布布扣

这两个是经过一定自定义后的显示界面,其不用自定义一样好看,自定义一般来说就是更改背景与边框。下面讲讲怎么弄弄;实践出真知。

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>

这时运行:

bubuko.com,布布扣
这个时候是没有任何的样式的,现在开始加入代码美化。

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 也可以不指定该样式。

现在看看样式咋样;

bubuko.com,布布扣

还不错吧?

当然还可以自定义一定的样式,具体可以修改 css 文件;这里不深入介绍。可以来个简单的,比如边框和背景改改:

这里咱们就直接在 Html 页面使用:

Head 部分加入;

    <style>
        pre.prettyprint
        {
            border: 2px dashed #888;
            background: #ddd;
        }
    </style>

Show:

bubuko.com,布布扣

这个样式可以了吧?甚至可以背景直接为黑色 这个也是可以的。

到这里其实使用上已经差不多了;不过还有一些其他的东西。

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:

bubuko.com,布布扣

3.最新的源代码和使用的 css 与 JS 打包

绝对官方没有修改过:

CSDN 下载


4.本次的源码下载:

CSDN 下载


========================================================

作者:qiujuer

博客:blog.csdn.net/qiujuer

网站:www.qiujuer.net

开源库:Genius-Android

========================================================

[HTML] Prettify 代码高亮使用总结

标签:google-code-prettify   prettify   代码高亮   pre代码高亮   

原文地址:http://blog.csdn.net/qiujuer/article/details/41413059

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!