[HTML]Prettyコードハイライト使用まとめ

===========================================================================================================
作者:qiujer
ブログ:blog.cdn.net/qiujer
ウェブサイト:www.qiujure.net
オープンソース:Genius-Android
転載は出典を明記してください.
http://blog.csdn.net/qiujuer/article/details/41413059
===========================================================================================================
Prettyとは何ですか?
Pretty は、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：
" + 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の役割は、Prettyprintコードハイライトプラグインを使用して、この属性を追加すると説明することである. PrettyJSは現在のページをスキャンしてこの属性があるpreを含んでからコードを使って明るく美化します.もちろん、対応するcssパターンを導入するためです.後のlang-javaは  Prettyプラグインは、現在のpreのコンテンツフォーマットを指定します. Prettyは、その属性に従って、対応するノードをスキャンして色を塗る.たとえば指定 lang-lang-htmlはスキャンします.body divなどは色処理して指定します. lang-javaはさらにJavaの特性に対応した色付け処理を行います.もちろん必要ではありません.指定できます. lang-otherはこのスタイルを指定しなくてもいいです.
今は様子を見てみます.
はいいですよね?
もちろん、特定のスタイルをカスタマイズできます.具体的にはcssファイルを変更できます.ここでは詳しく紹介しません.外枠や背景の変更などの簡単なものができます.
ここでは直接にHtmlページで使います.
ヘッド部分加入

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

ショー:

このデザインでいいですか?背景が直接黒でもいいです.これもいいです.
ここに来て使ってもほぼ同じです.他にもいくつかのものがあります.
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加速:
wwww.bootcdn.cn/prettify/ここに最新のCDNがあります.ファイルをプロジェクトの悩みにならないようにします.スピードもいいです.
一説に値するのは、特殊言語(lang-)のサポートがあれば、CSSなどの対応するJSを含む必要があります.

3.最新のソースコードと使用するcssとJSは包装します.
絶対公式は修正されていません.
CSDNダウンロード
4.今回のソースのダウンロード:
CSDNダウンロード
===========================================================================================================
作者:qiujer
ブログ:blog.cdn.net/qiujer
ウェブサイト:www.qiujure.net
オープンソース:Genius-Android
転載は出典を明記してください.
http://blog.csdn.net/qiujuer/article/details/41413059
===========================================================================================================