GoogleBloggerにCodeBlockを導入する方法

 

海上から宮島を望む

ＩＴリテラシー研究会では，さまざまなシステムの導入方法や活用方法について検討して行く予定ですが，ブログを始めるにあたり，どうしても整備する必要があるのが，Sourceを記述するCodeBlockです。

ソフトの取得方法にしろ，修正方法にしろ，コーディングを記述する必要があるからです。

ブログは，フリーで手軽に出来るGoogleBloggerを使うことにしました。

ブログについてもWordPressの方がアドインも多く，多彩な表現を行えるのでいいのですが，サーバー設定に時間がかかるので，こちらで対応することにしました。

さて，GoogleBloggerでのCodeBlockですが，こちらについてはいろいろあるようです。

今回はポピュラーな「Google-code-prettify」ツールを使うことにしたいと思います。

このツールは，「run_prettify.js」というCodeBlockソフトを格納サイトからWebに呼び込むことで，実現する仕様になっています。

そのため，通信回線の速度に左右されるのと，いつまでサービスを継続してくれるか分からないので注意が必要です。

それでは，学習を開始します。

  「Google-code-prettify」の読み込み設定

やり方は，GoogleBloggerの「テーマ」タグ画面の▽マークをクリックし，その中にある「HTMLを編集」アイコンをクリックします。

そして表示されたHTMLコードの</head>タグの前に以下のソースコードを貼付します。

なお，このツールは，ソースコードを色付けするスキンを持っているので，スキンを指定したい場合は「skin＝XXXX」と記載します。

コード

<!-- Google-code-prettifyを追加 --> 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"/> 
<!-- /Google-code-prettify -->

この例では，「desert」というスキンを指定しています。その他のスキンは，「default」，「sunburst」，「sons-of-obsidian」，「doxy」です。

それと，空要素”<script”の閉じタグを”/>”にしています。これは，xhtmlに対応する場合の閉じ方ですので構文がxhtmlに対応しているかをご確認ください。

対応していない場合は，エラーが出力されることがあります。但し，HTML5以降なら”/"が有っても無くても大丈夫です。

ソースコードのGoogleBloggerへの記載方法

GoogleBloggerの投稿画面でのソースコード記載方法は，テキスト形式の「作成ビュー」ではうまくいきません。これを，「htmlビュー」に変える必要があります。

その上で，html形式で記載していきます。具体的には，以下のように<pre>タグと<code>タグを使って表記します。

コード

<!-- codeblock文 -->
<pre class="prettyprint linenums"><code>-- ここにソースを記入する。--</code></pre>
<!-- codeblock文 -->

ここで，行番号を表示したい時は<pre>タグの中で，class名のprettyprintの後に「linenums]と記述しています。この時，行番号を１行ずつ表示したい場合は，<style>タグの中に以下のように書くと可能になります。

但し，「list-style-type: decimal;」は，２桁数字分しかスペースを確保しませんので，行番号が3桁数字になる場合は「padding-left: 0.1rem; margin-left: 0.5rem;」などとスペースを確保してください。行間隔を調整したい時は，pre{「line-height: 95%;」}等と調整して下さい。

コード

<style type="text/css">
  /* Google-code-prettifyの行番号を1行ずつ表示する */
  pre.prettyprint.linenums li{ list-style-type: decimal; padding-left: 0.1rem; margin-left: 0.5rem; }
  /* 行間を若干狭くする */
  pre.prettyprint{ line-height: 95%; }
</style>

また，このソースコードが長い文字列の場合，スクロールバーを表示したい時があります。その場合は下記のように記述します。

コード

<!-- codeblock文 -->
<pre class="prettyprint linenums" style="overflow: auto; word-wrap: normal;"><code>-- ここにソースを記入する。--</code></pre>
<!-- codeblock文 -->

もう一つの方法として，<style>タグの中に以下にように書くと同様の結果が得られます。

コード

<style>
  pre.prettyprint { overflow: auto; word-wrap: normal; }
</style>

注意点として，テーマによってはwhite-space の設定で pre-wrapがデフォルトになっているものがあり，「word-wrap: normal」が効かず，長いソースの途中で自動的に改行になってしまう現象があるようです。

そうすると，overflow: autoとしていてもスクロールバーが表示されません。その場合は，overflow: scrollとするか，テーマの「HTMLを編集」で，<style>タブを使って以下のように記入してみてください。（これによりwhite-space: preになる）

コード

<style>
       pre.prettyprint {
       overflow: auto;
       word-wrap: normal;
       white-space: pre;
      }
</style>

また，「htmlビュー」で記入する際に，ソースコード内にある「<」、「>」、「&」などの文字は、あらかじめ「 &It;」、「&gt;」、「&amp;」などに変換しておかないとGoogle-code-prettify上でうまく表示されませんのでご注意ください。これらは，変換してくれるサイトがあるようです。

当研究会でも，以下の変換サイトを準備しました。ご利用ください。

コードブロック表示のためのHTMLタグ文字変換ツール

コードブロック表示のためのHTMLタグ文字変換ツール

sgitl.blogspot.com

　結構面倒ですよね。

  最後に

一応，Google-code-prettifyを使って，ソースコードを表示することが出来ましたが，やはり使い勝手からいうと，WordPressのアドインを使った方が見栄えが良く手間がかからないと思います。

また，Google-code-prettifyでは，標準でCopyボタン機能が見つからなかったので，HTMLコードでコピー機能を加えました。