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

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

作者:qiujuer

博客:blog.csdn.net/qiujuer

网站:www.qiujuer.net

开源库:Genius-Android

转载请注明出处:http://blog.csdn.net/qiujuer/article/details/41413059

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

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 打包

绝对官方没有修改过:

CSDN 下载

4.本次的源码下载:

CSDN 下载

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

作者:qiujuer

博客:blog.csdn.net/qiujuer

网站:www.qiujuer.net

开源库:Genius-Android

转载请注明出处:http://blog.csdn.net/qiujuer/article/details/41413059

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

时间: 2024-08-27 19:25:30

[HTML] Prettify 代码高亮使用总结的相关文章

MarkdownPad2使用代码高亮插件

MarkdownPad 2有插入代码块的功能,但样式却不尽人意,但又不想换个编辑器,找了挺多相关资料,最后在MarkdownPad 2集成prettify高亮插件. 如下相关资料: [HTML] Prettify 代码高亮使用总结 Google Code Prettify,代码高亮的JS库 详解Google Code Prettify代码高亮Prettify.js库使用及其应用 prettify的bootcdn prettify的github 你可以下载后引用,也可以直接引用bootcdn. 具

[转]7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

7个高性能JavaScript代码高亮插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 Syn

9个实用的Javascript代码高亮脚本

代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目前,有很多免费而且有用的代码高亮脚本.这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java.Phyton或Ruby)等写的. 下面来推荐最受欢迎.最实用的9个Javascript代码高亮脚本. 1. SyntaxHighlighter 我相信这是最普遍代码高亮代码.它支持多

bootstrap设计网站中添加代码高亮插件

这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/google-code-prettify/prettify.css http://codecloud.sinaapp.com/google-code-prettify/prettify.js (2)在head中引入这两个文件 <link href="google-code-prettify/p

主题: 为kindsoft编辑器替换SyntaxHighlighter代码高亮,整合DEDECMS

作者: fmamcn, 发布日期: 2012-09-29 12:28:39, 浏览数: 1567 看了狼魂发表的将kindeditor中的代码高亮插件prettify换为SyntaxHighlighter 自己试了一下,总有一些问题,后来还是自己研究了一下,找了一些文档,做了一个 DeDeCMS本身的标记其不好用,更换为KindEditor后确实很不错了,但是KindEditor编辑器的代码高亮确实不怎么好看,也不怎么使用,虽然很简洁,但是功能上还是显得匮乏一些,所以就动手改了改,现在分享出来!

MarkdownPad2代码高亮插件兼容移动端样式

如果不知道MarkdownPad2使用代码高亮插件可以查看前一篇文章<MarkdownPad2使用代码高亮插件> 先看移动端效果图: 移动端点击查看效果 或者手机扫如下二维码: 我们经常阅读微信公众号文章的时候,常常看到文章内有高亮的代码,并且这代码不会换行,可以左右拖动滚动这样的效果对于我们阅读代码很方便也很舒服,上一篇文章使用高亮插件并不兼容移动端,经过简单的对高亮代码样式得修改,再通过markdownpad2导出html,这样我们就可以在移动端查看自己的代码笔记了.这个时候有人会纳闷我在

google code-prettify 代码高亮插件使用方法

找代码高亮插件选了好久,还是这个使用起来比较方便. 先上链接:插件下载地址 官方使用方法地址 建议看官方的资料,我这里仅仅简要描述一下使用方法: 引入方法: 测试引入是否成功:herf 换成 自己放置的路径,打开测试网页源代码,点击css,js文件链接 能看到代码内容即OK. <link rel="stylesheet" type="text/css" href="prettify.css"> <script type=&quo

博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)

前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动画特效,在本文中我们将教大家制作当前简约的页面制作方法. 只要你们有需求,我会尽量帮助到大家,在此感谢各位广大粉丝的支持和理解,我会尽量做到最好,希望小主们不要吝啬你们的支持和推荐,动动小手顶一顶,非常感谢大家长久的陪伴~~ 全部过程都是在“管理->设置”中完成的,博客皮肤推荐使用Simple Me