シンタックスハイライトエリアでワードラップを切り替えられるようにしたい

jQuery,Web,JavaScript | 2012年10月12日

先日調べごとをしててたまたま見つけたサイトに、シンタックスハイライトの領域内でワードラップを切り替えられる機能がついていました。

 

何のことか分かりにくいかもしれませんのでまずは実物をご覧ください。

> jQuery custom content scroller

このサイト内のコードが記述してあるところの左上を見ると「No wrap」というリンクがさりげなく入っています。

これをクリックすることで、エリア内のコードが改行されたりされなくなったりと切り替わるようになっていたのですが、

 

 

 

これってかっこ良くないですか！？

 

 

とうことで当サイトにも実装することに。。。

 

まずは完成イメージ

当サイトのシンタックスハイライトは「google-code-prettify」を使用しているのですが、これ自体にワードラップを切り替える機能はついていないのでオリジナルで機能を追加することにしました。

現状はエリア範囲内で改行された表示をデフォルトにしていますが、これを、このようにスイッチを追加して切り替えられる機能を実装します。

 

ただ、思いのほか実装までの過程でいろいろと躓いたので、備忘録も兼ねて完成までの軌跡を複数回に分けてご紹介します。

続きの記事: シンタックスハイライト改良：ワードラップ切り替えスイッチのインターフェイスを作る