源码侠

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

󰌂发布时间 2022-08-06 热度 432

 当前位置:  首页 / 教程资源 / 前端教程

教程内容:

Prettify 是什么?

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

这两个是经过一定自定义后的显示界面,其不用自定义一样好看,自定义一般来说就是更改背景与边框。下面讲讲怎么弄弄;实践出真知。
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 也可以不指定该样式。


评论(0)条

    源码侠

    站长素材 - 建站资源分享平台

    源码侠提供各类虚拟产品,虚拟资源以及教程、模板、素材等,源码侠是一个互联网虚拟产品,虚拟资源聚集地的特色网站!

    反馈建议

    kefu@xuniku.cn fuwu@xuniku.cn

    周一至周日9:00-23:00

    在线QQ咨询

    本期用户推荐小程序

    本站所有资源均为会员提供或网上搜集,版权归原作者所有,如需商业用途或转载请与原作者联系!所提供的内容仅供观摩学习交流之用,请勿用作商业用途!如有侵权,请及时 联系我们 删除

    Powered by 源码侠 © 2010-2020 流量联盟   copyright   北京流量圈信息科技有限公司