memorandum

MENU

code-prettifyでソースコードをエディタ風に表示

前回の記事でブログでソースコードを表示さるためのHTMLの記述方法を紹介しました。
今回は、ブログは表示だけでは物足りない！技術ブログなどでみかけるエディタ風なシンタックスハイライトで表示されたデザインにしたい！という方向けに、<pre>要素と<code>要素で掲載したソースコードのデザインをカスタマイズする方法をまとめさせてもらいたいと思います。「htmlの記述方法を知りたい」もしくは、「デザインは普通のテキスト表示が出来れば良い」という場合は下記のボタンより前回記事をご参照ください。

前回記事：ブログ記事にソースコードを表示する方法

code-prettifyを使用

ブログ記事などで紹介するソースコードをエディタ風なデザインにカスタマイズするために、今回はGoogleさんの「code-prettify」を利用させて頂きます。code-prettifyは<pre>要素と<code>要素内に記述されたソースコード部分を自動でシンタックスハイライトのまさにエディタ風なデザインに表示を切り替えてくれます。

code-prettifyの実装方法

code-prettifyを実装する方法について紹介したいと思います。具体的には下記の2つの方法があります。

  • CDN版を利用する
  • ファイルをダウンロードしたファイルを利用する

ひとつはCDN版を使う方法。もうひとつは、ファイルをダウンロードしてサーバーに一緒にアップして導入する方法です。
カスタマイズすることを考えると後者のタイプの方が圧倒的に管理がらくなので、今回はダウンロードした方法ですすめていきたいと思います。code-prettifyもデフォルトの状態だと体裁がいまいちなところも沢山あったりするのでカスタマイズは必要になってくると思います。

code-prettifyのデータは下記ページよりご利用頂けます。
GitHub – google/code-prettify

※CDNによる導入は上記ページに記載されている下記貼り付け用のコードをhead内に一行追加して頂ければOKです。

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

ダウンロードしたCSSなどの読み込み設定

まずはGitHub – google/code-prettifyページの「clone or download」ボタンをクリックしてファイルをダウンロードしてください。ダウンロードが出来たらzipを解凍してsrcフォルダにある以下のファイルを自分のブログのフォルダにコピーをしてください。

  • prettify.js → jsフォルダにコピー
  • lang-css.js → jsフォルダにコピー
  • prettify.css → cssフォルダにコピー

コピーが完了したら、これらのファイルを読み込むための設定を記述します。まずは、下記のファイル読み込みコードをhtmlのhead内に書き込んでください。（Wordpressだとheader.phpなど）

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

次にjsファイル読み込みと実行コードをbody要素の最下部に記述してください。（Wordpressだとfooter.phpなど）

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

上記の記述が完了すればcode-prettifyの読み込みは完了です。ただ上述した通り、このままだとデザインがデフォルトの状態で少し殺風景な感じがしてしまうかと思います。もっと普段使っているエディタとか、良く読んでいるブログっぽくしたい！ということであれば、更にテーマを追加したり自分でCSSを編集したりする必要があります。

code-prettifyのCSSをカスタマイズ

code-prettifyのCSSはprettify.cssファイルに集約されていますので、基本的にこのファイルを編集していくことで自分の好みのデザインにアレンジすることが可能となります。code-prettifyには、デザインテーマも沢山用意されているので、それらを利用するのも方法のひとつだと思います。デザインテーマは下記よりご利用頂けます。私は下記のページからDesertのテーマをベースにして調整をしています。

Gallery of themes for code prettify

prettify.cssをまるまるDesertに変更するのでも良いのですが、デフォルトのCSSも一部残したいところがあったので、DesertのCSSコードをprettify.cssに移植する形で編集しました。まずprettify.cssの下記のコード（24行目〜50行目）の箇所をDesertのCSSに差し替えます。

@media screen {
  .str { color: #080 }  /* string content */
  .kwd { color: #008 }  /* a keyword */
  .com { color: #800 }  /* a comment */
  .typ { color: #606 }  /* a type name */
  .lit { color: #066 }  /* a literal value */
  /* punctuation, lisp open bracket, lisp close bracket */
  .pun, .opn, .clo { color: #660 }
  .tag { color: #008 }  /* a markup tag name */
  .atn { color: #606 }  /* a markup attribute name */
  .atv { color: #080 }  /* a markup attribute value */
  .dec, .var { color: #606 }  /* a declaration; a variable name */
  .fun { color: red }  /* a function name */
}

/* Use higher contrast and text-weight for printable form. */
@media print, projection {
  .str { color: #060 }
  .kwd { color: #006; font-weight: bold }
  .com { color: #600; font-style: italic }
  .typ { color: #404; font-weight: bold }
  .lit { color: #044 }
  .pun, .opn, .clo { color: #440 }
  .tag { color: #006; font-weight: bold }
  .atn { color: #404 }
  .atv { color: #060 }
}

この部分は文字のそれぞれの色を指定していますので、色を自分の好みで変更したいときはここのブロックを更に編集してもらえれば簡単に調整できます。あと、DesertのCSSはclassの呼び出しを<pre>要素内にいれることを前提にしているので、もし<code>要素内でclass指定をしたい場合は下記の様にpreの部分をcodeに変更してください。どちらで呼び出しても問題はないので、調整しやすい方で対応してみてください。

code.prettyprint { display: block; background-color: #333 }
code .nocode { background-color: none; color: #000 }
code .str { color: #ffa0a0 } /* string  - pink */
code .kwd { color: #f0e68c; /*font-weight: bold*/ }
code .com { color: #87ceeb } /* comment - skyblue */
code .typ { color: #98fb98 } /* type    - lightgreen */
code .lit { color: #cd5c5c } /* literal - darkred */
code .pun { color: #fff }    /* punctuation */
code .pln { color: #fff }    /* plaintext */
code .tag { color: #f0e68c; /*font-weight: bold*/ } /* html/xml tag    - lightyellow */
code .atn { color: #bdb76b; /*font-weight: bold*/ } /* attribute name  - khaki */
code .atv { color: #ffa0a0 } /* attribute value - pink */
code .dec { color: #98fb98 } /* decimal-lightgreen */

続いて、行数の表示をするようにしたいので、行数表示をするときのCSSカスタマイズを下記の様に行いました。

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
  list-style-position: outside;
  list-style:  decimal;
  border-left: 1px #707070 solid;
  margin-left: 3.8rem;
  padding-left: 2rem;
}

最後にcode内の文字を等幅フォントに変更をしています。

code {
  font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

あとは他のページ要素とバランスを考慮して背景やpadding、文字の大きさなどを変更してもらえるといいと思います。
上手く表示が調整できない場合は、どのCSSが継承して干渉してしまっているかなどをChromeのデベロッパーツールで確認して該当箇所を調整して頂くといいと思います。
CSSのカスタマイズは以上となります。次はいよいよclassを呼び出す方法についてご紹介します。

code-prettifyのclass指定について

CSSのカスタマイズが終わったところで、いよいよ実践編であるclass呼び出しについてご紹介します。
これはとても簡単で、下記の様に<code>要素内で指定のclassを記入してもらうだけでOKです。prettyprintはcode-prettifyの基本classで、linenumsは行数を表示させた時に追加します。更に掲載するソースがCSSだった場合はlang-cssと追加してもらえればOKです。

<code class="prettyprint linenums">

CSSの場合は、

<code class="prettyprint linenums lang-css">

以上となります。
まだ、表示したソースコードをコピーしたときに余計な文字が入ってしまうとかがあるので、その処理が必要なのですが、それについては改めてこのブログで実装後にまとめていきたいと思います。code-prettifyはとても実装が簡単で便利なので是非ご利用頂ければと思います。

category:
web制作関連
Tag:
, ,