[HTML] Prettify Code Highlighting Usage Summary

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

Qiujuer

Blog: Blog.csdn.net/qiujuer

Website: www.qiujuer.net

Open Source Library: genius-android

Reprint Please specify the Source:http://blog.csdn.net/qiujuer/article/details/41413059========================================================
What is Prettify?

prettify is an HTML code highlighting plugin that will make your site code display more distinctive. In my use it is not the best, but it is very good. The light says it's useless to show everyone.

ShowTime

These two are custom-defined display interfaces that are not as good-looking as they are customized, and are typically changed from background to border. Let's talk about how to get it done.

CodeTIme1. Create an HTML file, add the pre node, and get some HTML code in the node.

<pre>//Async mode//Results Return command command with event callback = new Command ("/system/bin/ping", "-C", "4", "-S",    "", "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>

This runs:

This time is not any style, now start adding code beautification.

2. First introduce CSS style and JS:

    <link href= "Prettify.min.css" rel= "stylesheet" >    <script src= "Run_prettify.min.js" ></script>

3. Then add a class attribute to the Pre node:

<pre class= "Prettyprint Lang-java" >...</pre>

Prettyprint's role is to affirm the use of the Prettify code highlighting plug-in, when added to this attribute prettify JS will scan the current page contains the pre and then use the code highlighting, of course, but also to introduce the corresponding CSS style. The following lang-java is the content format that specifies the current pre for the Prettify plug-in, and prettify will be shaded based on its properties to scan the corresponding nodes. For example, specify lang-html then it will be scanned, the HTML body div will be shaded, and the specified Lang-java will be more Java characteristics of the corresponding color processing. Of course it is not necessary, you can specify Lang-other or you can not specify the style.

Now look at the style.

Isn't it good?

Of course, you can also customize a certain style, you can modify the CSS file, not in-depth introduction. Can be a simple, such as the border and the background change:

Here we will use the Html page directly:

Head part added;

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

Show:

Is this the right style for you? Even the background can be directly black this is also possible.

It's almost done here, but there's something else.

About:1. When introducing JS in the above;

<script src= "Run_prettify.min.js" ></script>

What is the difference between run_prettify and prettify?

In a nutshell, Run_prettify is self-triggering, rendering is done automatically after loading. If we use prettify JS we need to invoke the following method when the page load is complete:

    <script>        window.onload = function ()        {            //Load prettify            prettyprint ();        }    </script>

Of course run_prettify will also go to its code hosting to download some other JS to complete the corresponding other language support.

2.CDN Acceleration:

www.bootcdn.cn/prettify/

With the latest CDN acceleration here, you can eliminate the hassle of getting your files to the project, and it's also a good speed.

It is worth saying that if you have special language (lang-) support, you also need to include the corresponding JS, such as CSS:

3. The latest source code and the use of CSS and JS packaging

Absolutely no amendments have been officially done:

CSDN Download

4. Download the source code for this time:

CSDN Download

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

Qiujuer

Blog: Blog.csdn.net/qiujuer

Website: www.qiujuer.net

Open Source Library: genius-android

Reprint Please specify the Source:http://blog.csdn.net/qiujuer/article/details/41413059========================================================

[HTML] Prettify Code Highlighting Usage Summary