最近カスタマイズしたデザインの覚書第4局「算譜」 : 一萬人の麓路()

ウェブ系サイトにはXMLやCSS、プログラミング言語のソースコードのサンプルが掲載されていることが多く、いつも参考にさせていただいています。
その内容とは別に、コードが色分けなどされて美しく表示されていて、どうやってるんだろうと不思議でした。
それで、ソースコード表示でぐぐってみました。

google-code-prettifyを実装してみた

いろいろな方法がヒットしましたが、いちばん手軽そうなgoogle-code-prettifyというJavaScriptライブラリを入れてみることにしました。何が手軽かというと、僅か二本のJavaScriptファイル(一本に統合可)と一本のCSSファイルをダウンロードしてブログにアップするだけで、面倒な設定がほとんど無いのです。

導入

google-code-prettifyにアクセスしてprettify.js、lang-css.js、prettify.cssを入手する。

以上三本のファイルをサーバーにアップロードする

ブログのHTMLファイルの<head>～</head>内に以下の三行を書き込む
```
<link rel="stylesheet" href="prettify.cssのURL" type="text/css" />
<script src="prettify.jsのURL"></script>
<script src="lang-css.jsのURL"></script>
```
＊ライブドアブログだと、ブログの設定→カスタムJS→head内に書き込めばおｋ

HTMLファイルの<body>～</body>内に以下の一行を書き込む
```
<script>prettyPrint();</script>
```
なるべく下の方に、できれば</body>タグの直前が良いようです。
＊ライブドアブログだと、ブログの設定→カスタムJS→body内に書き込めばおｋ

以上で導入は完了です。

基本

表示したいコードを<pre class="prettyprint">・・・</pre>で括ります。

【重要】特殊文字 < と > はタグ記号と判断されてしまうので、それぞれ < > と、変換コードに置き換えます。
言語によっては & や $ なども特殊文字になるので、必要なら対応します。

行番号を表示したい時には class="prettyprint linenums" と、クラスを追加します。
ここで、行番号を例えば27から始めたい時には、linenums:27 と書きます。
27歳の人にアラフォー言うのはどうなんだろう。

コードの言語は自動判定されますが、たまに表示がおかしくなる事があります。
そういう時は、HTML なら lang-xml を、CSS なら lang-css を、 JavaScript なら lang-js を、クラス追加します。
【例】class="prettyprint linenums lang-xml"

以上を踏まえて、具体的にやってみましょう。
こんな↓HTMLコードがあったとします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <script src="http://scoyan.com/scoyan.js"></script>
  </head>
  <body>
    <h1>緊急告知</h1>
    <p><span style="color: Red">ヤングガンガンの発売日は5月15日です!</span></p>
  </body>
</html>

順序としては、初めに特殊文字の置換を行います。
このソースを別のテキストエディタなどにコピペして、< → < そして > → > と一括置換。
置換したテキストをブログのエディタに移し、前後を<pre class="prettyprint linenums"> と </pre>で挟みます。

<pre  class="prettyprint linenums">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
  &lt;head&gt;
    &lt;script src="http://scoyan.com/scoyan.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;緊急告知&lt;/h1&gt;
    &lt;p&gt;&lt;span style="color: Red"&gt;ヤングガンガンの発売日は5月15日です!&lt;/span&gt;&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

これをブラウザで表示させると

<!DOCTYPE html>
<html lang="ja">
  <head>
    <script src="http://scoyan.com/scoyan.js"></script>
  </head>
  <body>
    <h1>緊急告知</h1>
    <p><span style="color: Red;">ヤングガンガンの発売日は5月15日です!</span></p>
  </body>
</html>

こんなふうに、タグや要素が色分けして表示されます。やったね
色の意味はこんな感じ↓

クラス 意味(各classの文字色で表示) 松実玄さん(14)のコメント
.str 文字列 
.kwd キーワード
.com コメント
.typ 型
.lit リテラル (1, null, trueなど)
.pun 句読点 瑞原はやりさん(10)のコメント
.pln プレーンテキスト 
.tag SGMLタグ
.atn SGML属性名
.atv SGML属性値
.dec DOCTYPEのようなマークアップの宣言

参考:JavaScript Library Archive>プログラムのコードに色を付ける「google-code-prettify」

カスタマイズ

導入で紹介したprettify.css は短くて特に難しいところの無いコードなので、カスタマイズは容易です。
実はNS、臨機応変！このファイルはアップロードせず、ブログのテンプレの中にコピペ&改変して、上のようなボックスデザインにしています。
文字色はまだいじってませんけど…(コードはこの下↓)

すみません。この章は全文を取り消します。
詳細は追記を御覧下さい。
HTMLは割ときれいに表示してくれるんですが、CSSの表示がいささか？なんです。ちょっとこれ見てくだサイ
```
div#main{　display: block;
  margin: 1.2em;
  color: rgba(239, 239, 239, 0.6);/*コメントです*/
  background: url(http://humotomiti/img/scoyan.png) repeat;
}
```
#main がコメント扱いで、その後ろの有意な記述も全部コメント表示色になってしまいます。キーワードと属性名はプレーンテキスト色、属性値が数字の場合はリテラル色、と意味不明な配色。
url()の中のURLは引用符を省略してもいいのに、その書き方をするとこれもコメント色に。
仕方ないので引用符をつけてやると、ちゃんと表示されます。
```
   background: url('http://humotomiti/img/scoyan.png') repeat;
```
たぶんこれは http: の後の // をコメントアウトの // と誤認してるんですね…
調べてみると、 # も Python という言語で、やはりコメントアウトに使うようです。
でもこれ# をID設定に使うCSSだし。どうしろと。
他の導入サイト様のサンプルを見ても同じ現象が起こっていましたが、見た限りではこれを問題視してる人はいませんでした。
もやもやするわね…
ともかくCSSとして正しく記述されている # や()内の // 以下が一律コメント色になるのは明らかにバグなので、対応しなきゃいけません。
応急措置として、上の例なら#main を <span class="nocode kwd"> と </span>で括ってやり、kwd クラスを強制します。
```
div<span class="nocode kwd">#main</span>{　display: block;
```
すると
```
div#main{　display: block;
```
なんとか改善しました。main はキーワードではないので pln あたりが適切なんでしょうが、いちおう色の違いを分かりやすくするために kwdクラスを指定しました。

さて、このブログはテーマフォントを設定しておりませんので、閲覧者様のOSやブラウザで設定したフォントで表示されているはずです。
しかし、ソースコードは数字とアルファベットの羅列なので、フォントの種類によっては判読しにくくなる場合があります。数字の1とLの小文字のlとか。
そこで、コードの部分だけは読みやすく、できればカッコいいフォントで表示したい。
で、探してみたらありました。
かのAdbe様が無償配布している専用フォント。
その名も ~~Sukoya Cokadi Pro~~ Source Code Pro！
これをコードの表示領域のfont-familyに設定します。
```
pre.prettyprint{ /*表示領域のデザイン*/
    box-shadow: 2.6em 0 0 0 rgba(200,220,255,0.4) inset;
    padding: 10px 1.2em;
    border: none;
    background-color: rgba(238,238,238,0.8);
    font-family: "Source Code Pro",sans-serif;
}
```
念のため、フォントが無ければグーグル様に探してもらえばいいじゃない！
```
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
```
これをHTMLの<head>部に追加しておきます。

あ、これにて気分だけでもプロ！(乱心)

もう一本書きかけの記事があるけど、仕上げる気力はノーリメインです。
というわけで、もう寝ます。
だって明日は

【5月8日追記】
ごっめーん！
上で表示のバグがどうたら言ってましたが、lang-css のクラス指定を忘れてましたﾃﾍﾍﾟﾛ

<pre class="prettyprint linenums lang-css">div#main{　display: block;

こうしてやると

div#main{　display: block;
  margin: 1.2em;
  color: rgba(239, 239, 239, 0.6); /*コメントです*/
  background: url(http://humotomiti/img/scoyan.png) repeat;
}

ちゃんと綺麗に表示されています。
但し、コメントアウト前に半角スペースを少なくとも一つ入れないと、こんな表示色になります。

  color: rgba(239, 239, 239, 0.6);/*コメントです*/

申しわけありませんでした。

タグ：: #CSS; #google-code-prettify; #SourceCodePro; #松実玄; #瑞原はやり

一萬人の麓路()

咲-Saki-のブログです。

最近カスタマイズしたデザインの覚書第4局「算譜」

google-code-prettifyを実装してみた

導入

基本

カスタマイズ

コメント

トラックバック

google-code-prettifyを実装してみた

導入

基本

カスタマイズ

「覚書」カテゴリの最新記事

コメント

トラックバック