サイト内でサンプルソースコードを表示させるために、シンタックスハイライトを導入してみました。

Google Code Prettifyはソースコードを読みやすく色分けします。

loaderを使用しての表示。

Defaultの表示

次のコードで関連するスクリプトとスタイルシートを一括して読み込みます。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

表示するソースコード部分の指定は下のように行います。（Default表示サンプル)

<pre class="prettyprint lang-js">
console.log('Hello World')
</pre>

その他のテーマの表示

次のコードで関連するスクリプトとスタイルシートを一括して読み込みます。テーマの指定はskin=テーマ名となります。

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

Google code-prettifyのカスタマイズ

制御系のプログラムを記述していると、アセンブラ形式風の記述をすることが多くなる。どうしても、スペースやタブでの位置揃えが多くなり、Google code-prettifyで記述した内容を、iOsで表示するとずれが生じてしまう。iOsでも見やすいように、Google code-prettifyをカスタマイズしてみる。

ダウンロード

以下のサイトからダウンロードします。

使用方法

srcフォルダにある以下のファイルコピーをしてください。
・prettify.js
・lang-css.js
・prettify.css
Default以外のテーマを使用する場合、stylesフォルダにcssファイルが入っています。

以下コードをhead内に一行追加します。

<link rel="stylesheet" href="/css/prettify.css">

jsファイル読み込みと実行コードをbody要素の最下部に追加します。

<script src="/js/prettify.js"></script>
<script src="/js/lang-css.js"></script>
<script>
prettyPrint();
</script>

表示結果

下記アセンブラソースはパソコンのブラウザで見ると、一見よさそうです。

見事にデザインが崩れ、iOsサファリでも等幅フォントで表示されませんでした。

phoneのsafariでみると、以下にようになります。

まずはprettify.cssの配色部分をsunburstの配色に変更。

  .pln { color: #fff }  /* plain text */
  @media screen {
   .str { color: #65B042 }
   .kwd { color: #E28964;}
   .com { color: #AEAEAE }
   .typ { color: #89bdff }
   .lit { color: #3387CC }
   .pun { color: #fff }
   .pln { color: #fff }
   .tag { color: #89bdff;}
   .atn { color: #bdb76b;}
   .atv { color: #65B042 }
   .dec { color: #3387CC }
   .fun { color: red }
  }
    

次にpre.prettyprintの部分を下記コードに変更する。

 pre.prettyprint { 
    padding: 2px; 
    border: 1px solid #888;
    background-color: #000;
    border-radius: 4px;
  }
    

この状態では、まだiOs Safariでは等幅にならないので、下記フォント指定を追加する。

  pre {
    font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    font-size:14px;
    line-height:14px;
  }

参考サイト

今回、Google code-prettify導入するのに、参考にさせていただいたサイトです。