Bloggerのカスタマイズ Ⅱ　ソースコード挿入-紆余曲折の記録

コピペでカスタマイズ。まったくもって、自分だけのための備忘録

ソースコードをブログ記事に貼り付ける方法をまとめておきます。他の方のブログ記事からの引用です。私の使いそうな要点をまとめました。

あるとき気づいたのですが、スマホでは横スクロールができません。折り返し表示になっています。

HTML編集でソースコード貼り付けscriptを追加する
使い方：編集画面を「HTMLビュー」にして、ソースコードを挿入する
ソースコードの表示のさせ方にオプションがある
行番号表示のモディファイ
ソースコードの表示幅を半分にする方法
1. 表示幅レスポンシブデザイン

HTML編集でソースコード貼り付けscriptを追加する

「テーマ」「カスタマイズ横の▽」「HTMLを編集」の順にクリックして、HTMLの内容を表示させます。
つづいて、任意の行にカーソルを置き「CTRL+F」で"Search"が最上段に出ますので、ここに"</head>"と書いて検索します。
"</head>"のすぐ上に次のソースコード貼り付けscriptを追加します。
scriptは”Google code prettify”を使用します。
行番号表示と縦横スクロールができるようにしています。

<!-- Google code prettify start -->
    <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'/>
    <style type='text/css'>
      .prettyprint ol.linenums &gt; li {
        list-style-type: decimal;
      }

      .prettyprint ol li {
        margin:0;
      }

      pre.prettyprint{
        width:100%!important;
        background-color:#202020!important;
        font-size: 14px;
        line-height: 1.6;
        font-family: Consolas,SFMono-Regular,Menlo,Monaco,&quot;Liberation Mono&quot;,&quot;Courier New&quot;,monospace;
        overflow: auto !important;
        white-space: pre !important;
      }
      pre.prettyprint.high {
        overflow: auto;
        height: 23em;
  	  }
    </style>
<!-- Google code prettify end -->

このように、ソースコードを色分けして見やすくすることを構文強調・シンタックスハイライトと言います。色分けスタイルは5種類ほどあるようです。

色々見て回って、sunburstをベースにした”Google Code PrettifyをCDNで使う方法”のスタイルが気に入りましたので、これを使わせていただきました。縦横のスクロールを行うのに、overflow: auto !important ;以下のcodeを追加しています。

【後日記】

黒背景が目立ち過ぎと思えてきたので、薄色背景のデフォルトスタイルに変更しました。

使い方：編集画面を「HTMLビュー」にして、ソースコードを挿入する

使い方は、例えばこの行の下にソースコードを挿入するならば、編集画面を「HTMLビュー」に変えてから、</span></div><div>とかの後に続けて、

<pre class="prettyprint">と</pre>で挟んだ間にソースコードを書きます。

<pre class="prettyprint">
ここにソースコードを書く
</pre>

このとき、"&", "<", ">" ,'"', "'" のHTML特殊文字はそのまま使うと、正常に表示されません。

HTML特殊文字変換サイトへ行って、 "&", "<", ">", """, "'" に変換したソースコードにします。

ソースコードの表示のさせ方にオプションがある

行番号

<pre class="prettyprint linenums">にすれば、行番号を付与できます。

さらに、linenums:2 などと開始数字を指定するとその番号からカウントされます。

<pre class="prettyprint linenums:2">
ここにソースコードを書く
行番号付きになる
</pre>

コードボックスの高さ

コードボックスの高さを制限することもできます。最初に示したソースコード貼り付けscriptを縦スクロールさせるために、<pre class="prettyprint high">として、コードボックスの高さ制限を有効にしました。制限を超えた行は縦スクロールをします。

コードボックスの高さは、13行目で”height: 23em;”としています。

<!-- Google code prettify start -->
    <script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'/>
    <style type='text/css'>
      .prettyprint ol.linenums &gt; li {
        list-style-type: decimal;
      }

      .prettyprint ol li {
        margin:0;
      }

      pre.prettyprint{
        width:100%!important;
        background-color:#202020!important;
        font-size: 14px;
        line-height: 1.6;
        font-family: Consolas,SFMono-Regular,Menlo,Monaco,&quot;Liberation Mono&quot;,&quot;Courier New&quot;,monospace;
        overflow: auto !important;
        white-space: pre !important;
      }
      pre.prettyprint.high {
        overflow: auto;
        height: 23em;
  	  }
    </style>
<!-- Google code prettify end -->

言語

<pre class="prettyprint lang-言語">で、コードの言語を指定できます。これに応じてコードの解釈が変わります。

デフォルトの対応言語は次になります。

"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",

"js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml","xsl"

オプションは順不同に空白を挟んで、続けて書くことができます。

例：<pre class="prettyprint linenums:5 high lang-html">

行番号表示のモディファイ

スタイルをdesertからsunburstに変えたら、下記のCSSを追加しなくても行番号が1行ごとに表示されるようになりました。GitHubで調べてみると、sunburstには下記のcodeが含まれていました。

sunburstに変える以前の内容は、引用にしておきます。

行番号のデフォルト表示は5行飛びでしたので、CSSを追加して1行ごとに表示させるようにしました。

始めは良くある事例の次のCSSとしていましたが、行番号の左が詰まって見にくいので、”Google【code-prettify】ソースコードの全ての行に行番号をつけたい”を参考にさせていただき、改良しました。
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
    list-style-type: decimal !important;
}
改良前の行番号表示CSS

ソースコードの表示幅を半分にする方法

横に短いコードでも、画面ほぼ一杯にソースコード枠が表示されることが気になっていました。表示幅を制限する方法を力業で見つけましたので、書いておきます。

ヒントはここからもらいました。

”WEB ページ作成基準google code prettify”

まず、冒頭に示したコードから

pre.prettyprint {
width:100%!important;

にある!importantを削除しておきます。

次に、ソースコードをHTMLに書き込むコードにstyle="width:50%;を追加します。

ここにソースコードを書く

</pre>

例えば、すぐ上のコードの表示幅を50%にしてみます。

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
    list-style-type: decimal !important;
}

表示幅レスポンシブデザイン

短いコード向けに表示幅を半分にしてしまうと、スマホでも半分になってしまいます。ただでさえ狭い横幅を半分にするのはもったいない以上に見栄えが最悪になります。下記のHTMLは横幅 width: 60%; としています。

というわけで、HTMLに style="width:50%; に書いていても、それを無効にするようにHTMLを変更します。変更箇所は pre.prettyprint { のところです。

pre.prettyprint {
        width :90%;/*ソースコードの画面比率*/
        margin: 0 0 0 5%;/*左端から5%ずらす*/
        padding: 0 0 0 20px;/*番号欄の幅*/
        background-color: #fffff9;/*全体の背景色 ミルキーホワイト*/
        border: 1px dotted #888;
        font-size: 13px;
        overflow: auto;
        white-space: pre-wrap;
      }
		@media only screen and ( max-width : 1200px ) {
	       	 pre.prettyprint{
	        width :95% !important;/*ソースコードの画面比率 優先*/
	        }
		}

11行目からの記述を追加しました。画面が横幅1200px以下（タブレット、スマホ）ならば、width :95% !important; で強制的にフルサイズの95%にします。