MAPもろもろ雑記 > シンタックスハイライトについてのメモ

しょっちゅういるものではないが、ときどき必要になる。それがシンタックスハイライト。 プログラムやHTMLのソースコードのコマンドや変数などに色をつけて、見やすく編集してくれるツールです。 いくつか候補はありますが、とにかくめんどくさくないやつという視点で選んでみた。

シンタックスハイライトについてのメモ

シンタックスハイライトに関してちょこっと調べてみた感じでは、
軽さ(速さ)やデザインのおしゃれ感、
使い勝手といった点をまんべんなく満たしているという意味で、
prism.js がよさげでした。
他の方におすすめするならそれでしょうね。
でもわたしは、
Google Code Prettifyを使うことにします。
名前のとおり、
Googleが提供してるシンタックスハイライターですね。
決め手はオートローダー機能
なんせ、
使用頻度がそんなに高くないもんで、
めんどくさいやつは避けたかったんですね。
オートローダーだと、
cssやjsファイルすらダウンロードしたりアップしたりしなくていいし、
実際に使いたい場所だけのピンポイントな記述で完結できる。
使いたいときに使いたいとこだけで、
っていう、
とにかくこういう単刀直入なのがありがたいわけですね。
まずは、
行番号表示を指定しなかった場合。
<!--▽-->
<div class="col_01">
<h2 class="h_01">シンタックスハイライトについてのメモ</h2>

シンタックスハイライトに関してちょこっと調べてみた感じでは、<hr />
軽さ(速さ)やデザインのおしゃれ感、<hr />
使い勝手といった点をまんべんなく満たしているという意味で、<hr />
<span class='f_gre f_18'>prism.js</span> がよさげでした。<hr class='br2' />

他の方におすすめするならそれでしょうね。<hr class='br2' />

でもわたしは、<hr />
<span class='f_vio f_18'>Google Code Prettify</span>を使うことにします。<hr class='br2' />


次は、
行番号表示の指定ありの場合で、
初期値を101にしてみた例。
<!--▽-->
<div class="col_01">
<h2 class="h_01">シンタックスハイライトについてのメモ</h2>

シンタックスハイライトに関してちょこっと調べてみた感じでは、<hr />
軽さ(速さ)やデザインのおしゃれ感、<hr />
使い勝手といった点をまんべんなく満たしているという意味で、<hr />
<span class='f_gre f_18'>prism.js</span> がよさげでした。<hr class='br2' />

他の方におすすめするならそれでしょうね。<hr class='br2' />

でもわたしは、<hr />
<span class='f_vio f_18'>Google Code Prettify</span>を使うことにします。<hr class='br2' />


デフォルトでは「行番号」が5行毎にしか表示されないので、
次のようにカスタマイズのためのスタイルを追加しました。
ol の左パディングを指定している部分は、
当社スタイルシートの別の設定を打ち消す意味なのでふつうは要りません。
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 
  {
  list-style-type: decimal;
  }
ol
  {
  padding-left:40px;
  }
</style>

ここで、
ちょっと知っといたほうがいいのが、
お手軽にHTMLコードをエスケープしてくれるユーティリティ。
探せばいくつかありますが、
preタグで囲む部分のコードを、
先にこういうのでまとめてエスケープしとくと楽なんですね。
標準/ページトップ

UP