prettifyCodeの使い方


【経緯】：
令和2年1月20日月曜日。朝十時に起きて、寝ぼけ眼でポスティングの仕事を一時間ばかりやって、セブンのチャーハンおにぎりと焼きおにぎりを買って帰宅した。
中々気が乗らなくてスイミングスクールにも練習に行ってなくて、でも今日は晴れてて、温かかったので「えいっ！」ってノリでバイクで行ってきた。
バタフライに力強さがない。正月休みに入る前までは、休みながらも筋トレとかしてたのでちゃんと肩も出てたけど、
バタッと練習に行かなくなってから、リカバリーができなくなってきた。
100m個人メドレーを泳いでみたが、結構息が上がっている。
ちゃんと練習しないとなって実感しました。
家に帰ってきて、Webのフロントを JavaScript デカく仕事を振り返って、記録に残すって大事だよなって、常々思っていても、
中々ドキュメントを書く仕事に切り替えることができなくて踏ん切りがつかなかった想い個をしを上げて、
このサイトの改修を、意気込む。
以前は、コードを掲載するにしても SyntaxHighlighter の記述がめんどくさくて、手を付けないことが多かったが、
いつかはやらないといけないことに気づいて、腹を決めた。
ここでは、調べながら身に着けた prettfiyCode というシンタックスハイライターを使いながら、
他のサイトでは触れられていなかった、利用上の細かい注意点を掲載する。


HTMLのマークアップをご覧ください。
C#をハイライトするための記述です。

0.コーディング

 
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <title>prettifyCodeの使い方</title>
    <meta charset="utf-8" />
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=lang-cs&skin=sunburst"></script>
    <style>
    .prettyprint ol.linenums > li {
        list-style-type: decimal; 
    }
    </style>
    </head>
    <body>
    <pre class="prettyprint linenums">
        Console.WriteLine("Hello World");
        for(int i=0;i<num;i++)
        {
             Console.WriteLine(i.ToString());
        }
    </pre>
    </body>
    </html>


【目次】：
【詳細】：

1.コーディング解説

 その1：CDNでスクリプトを読み込む

    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=lang-cs&skin=sunburst"></script>


上記、CDN の文法。
https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js までは必須。
以降、
?の後は、
lang=lang-cs&skin=sunburst
と続けるが、オプションになっているようで、無くても動作する。
lang オプションは、複数指定が可能になっている。
lang=lang-cs&lang=lang-htmlとすることで、
C#とHTMLに対応するようだ。
skin=sunburst
では、スキンの見栄えを設定する。


その2：スタイルを調整する



        <style>
        .prettyprint ol.linenums > li {
            list-style-type: decimal; 
        }
        </style>


上記、スタイルシートを適用すると、行番号の表示が変化する。
デフォルトでは、5の倍数で行番号が表示されていたが、
1行づつしっかり行番号を表示させることができるようになる。


その3：ハイライトさせたいコードをマークアップする



        <pre class="prettyprint linenums">
            // ハイライトさせたいコード
        </pre>


class内の linenums は、行番号の表示をさせるための記述。