無為空間

現在このBlogで使っている「cool_black」テンプレートで <pre><code> を使うと、下と右に必ずスクロールバー用の白いスペースが発生する。

前々からこれが気になっていたのと、またそれとは別に、コードに色付けしたいという気持ちあったので、各種サイトを参考にしながらSyntaxHighlighterを導入してみることにした。

まず必要なファイルをBlogにアップロード。
今のところはC++とHTMLにさえ対応できればよいので、上げたのは以下の5つ。

• SyntaxHighlighter.css ※サイトの雰囲気に合わせて多少変更有り
• clipboard.swf
• shCore.js
• shBrushCpp.js
• shBrushXml.js

次に、HTMLテンプレートの後ろの方に以下のコードを追加する（ファイル名を記述している部分は実際は絶対パス）。

<link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css"></link> <script type="text/javascript" src="shCore.js"></script> <script type="text/javascript" src="shBrushCpp.js"></script> <script type="text/javascript" src="shBrushXml.js"></script> <script type="text/javascript"> dp.SyntaxHighlighter.ClipboardSwf = 'clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>

これは「記事部分のすぐ後ろ」に記述するとレンダリングが早くて良い、気がする。

あとは、普段C++のコードを記述するときに

<pre><code>
	:
</code></pre>

としていた部分を

<pre name="code" class="C++">
	:
</pre>

とすればOK。

試しに過去の記事を色付けしてみたが、なかなか良い感じにレンダリングされている。
（自動改行しているのにスクロールバー付きなのが謎だが）

またこのスクリプトでは、オプションによってレンダリングする項目を調整できる。
例えばこの記事の場合、一番上のコードは「記号の実体参照化が面倒」だったので

<textarea name="code" class="html">
	:
</textarea>

と記述し、それ以外は「行番号とか邪魔」だったので

<pre name="code" class="html:nocontrols:nogutter">
	:
</pre>

と記述している。
この辺りの自由度も魅力の１つである。

というわけで。
ようやくこのBlogも <pre> の白枠から解放されることになった。
めでたしめでたし。

と、感慨深く過去の記事を記事を読み返してみたら、なぜか全ての <pre> から白枠が消えていた。あ、あれぇ？
個別に overflow:hidden; を設定しているものもあるけれど、それ以外は overflow:auto; のままだから枠は消えないはずなのだが……
あれぇ？

スポンサーサイト