SyntaxHighlighter for WordPressのスクロールバー

投稿者: | 2012年3月1日

当サイトではソースコードのハイライト表示にSyntaxHighlighterを使用しているのだが、横スクロールバーが表示されずに右端が切れてしまうことがある。

今回の記事はSyntaxHighlighterで長い1行が途中できれてしまう問題についてだ。

SyntaxHighlighterはBlogをはじめとしたネットメディア上でソースコードを強調表示するための便利なツールだ。

JavaScriptで作成されていて設置も簡単。

WordPressならプラグインのインストールで数クリックで設置完了してしまう。

どうやら、1行しかハイライト対象がないときにはスクロールバーが表示されないようだ。
表示が収まっているのなら良いのだが、その1行が長いときに右側が表示しきれないという問題がある。
(2012年/03/01最新版使用)

右側が切れてしまうような長さを持つものは、そのコードに対するコメントを入れるなどして無理やり複数行にしてしまうという方法で逃げている。本当なら、1行でも右端が表示しきれていないときは、横方向のスクロールバーを表示するようにカスタマイズしたら良いのだけどね。

半角スペースを入れることで複数行と認識させてスクロールバーを表示させることが出来る。
だが、WordPressを使っているとエディタの最適化によって空白が削除されてしまう。うむむ

大抵は複数行での使用かと思うのでそれほど問題ではないが、同じ問題で困っている人はおためしあれ。