11.5 HTML/ソースコードの修飾 SyntaxHighlighter/カスタマイズ・表示指定

 
 何点かカスタマイズしたのでメモを残しておきます。
11.5.1 ツールバーの非表示
11.5.2 ソース枠のサイズと縦スクロースバーの非表示
11.5.3 ソースのハイライト
11.5.4 行末の折り返し
11.5.5 開始行番号の指定
11.5.6 行番号を非表示

11.5.1 ツールバーの非表示

 デフォルトでは(ちとわかりにくいかと思いますが)右上にツールバーってのが出ちゃっているのです。
#include <stdio.h>
										/*	複数行の
											コメント							*/
int main(int argc, char *args[])		//	単一行コメント
{
    printf("Hello, world!\n");
    return 0;
}

 これを消すにはソース記述時に

<pre class="brush: c; toolbar: false;">

 と書くか、スクリプト読み込み時に

<script>
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>

 と記述すべし、とのことで、わたしは後者を選びました。

11.5.2 ソース枠のサイズと縦スクロースバーの非表示

 「shCore.css」の記述でデフォルトでは
.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}

 と書いてあって、枠いっぱいにソースが記述されて、ソースの前後に余裕がない。
 また、常に縦スクロールバーが表示されていたので

.syntaxhighlighter {
  width: 80% !important;
  margin:   0 0 0 2em !important;		/*	外側と枠の間	*/
  padding: 1em 0 1em 0 !important;		/*	内側と文字の間	*/

  position: relative !important;
  overflow: auto !important;
  overflow-y: hidden !important;
  font-size: 1em !important;
}

 と記述しました。
 2行目が、記述エリアに対するソース枠の比率です。
 3行目で、記述エリアからソース枠までに2文字分のインデントをいれています。
 4行目で、ソースの内枠と外枠の間に前後1文字ずつの行間をあけています。
 8行目で、縦スクロールバーを非表示にしています。

11.5.3 ソースのハイライト

 前項で、行をハイライト表示にしていますが、これは
<pre class="brush: css; highlight: [2, 3, 4, 8];">

 と「highlight」というキーワードによって設定してます。

11.5.4 行末の折り返し

 下記のようなソースの場合(まあこれは極端な例ですが)
てすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすとてすと

 デフォルトだと、横スクロールバーが表示されたり、はてしなく横に広がったりするのです。
 スクロールバーだったり、横が幅広になるかはブラウザにも左右されるようですが。

 表示しているのがコンピュータ画面である場合は、まぁよいのですが。
 これが iphone 付属の safari だったりすると大変


 えらく小っちゃく表示されて Google 大先生から「モバイルフレンドリーではないぞよ」とおしかりを受けること必至です。

 なので行末がはみ出る場合は折り返ししたいわけです。これを修正するには

/style/shCore.css
 を編集します。
.syntaxhighlighter .line {
   white-space: pre !important;
}

 を下記に書き換えます。

.syntaxhighlighter .line {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

 そうすると下記のような表示になりまして Google 大先生も許してくれるのではないかと・・・。


 と、ここまではよかったものの・・・。
 折り返しすると、行番号と実際の行の表示がずれてしまうので、あまりおすすめできません。

11.5.5 開始行番号の指定

 プロパティ名「first-line」で行番号を指定すると、開始行番号を変更することができます。
<pre class="brush: perl; first-line: 27;">
$analog = '/usr/local/bin/analog';
</pre>

 と書くと以下のように表示されます。

$analog = '/usr/local/bin/analog';

11.5.6 行番号を非表示

 行番号を非表示にするには、「light: true;」と記述します。
<pre class="brush: perl; light: true;">
$analog = '/usr/local/bin/analog';
</pre>

$analog = '/usr/local/bin/analog';

 でもこれだと、左マージンがないので気持ち悪いですね。行番号ありなしでスタイルシートをかき分けるのも難しそう。

 それで試行錯誤して、裏技的に見つけたのが

<pre class="brush: perl; first-line: 0;">
$analog = '/usr/local/bin/analog';
</pre>

 と、先頭行番号を 0 にすると、1行だけ非表示にすることはできます。

$analog = '/usr/local/bin/analog';

 複数行になると2行目以降に、行番号が 1 から出始めちゃうんですけどね。
 1行だけ抜き出す分には、事足りるのだ。