Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SyntaxHighlighter

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

白枠

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

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

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

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

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

あとは、普段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>

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

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

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

スポンサーサイト

コメント

コメントの投稿

コメントの投稿
管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://idlysphere.blog66.fc2.com/tb.php/38-45d72e80
この記事にトラックバックする(FC2ブログユーザー)

Appendix

タグ

Blog内検索

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。