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導入するのに、参考にさせていただいたサイトです。
コメント