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

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

前回の記事で書いた通り、シンタックスハイライト内のワードラップ切り替え機能を実装するまでの方法を書きます。

 

まずは見た目から

まず、切り替えスイッチのインターフェイスを表示するところまで。

このサイトのシンタックスハイライトは記事内の<pre>タグに自動的に適用されるようにしています。

<pre>
<!-- この間に書いたものがハイライトされる -->
</pre>

この<pre>のひとつひとつにスイッチを追加することになるのですが、HTMLのコードは以下のようにすることにしました。

<div class="code-wrapper wrap">
  <ul class="wrap-switch">
    <li><a class="wrap-on">WRAP</a></li>
    <li><a class="wrap-off">NO WRAP</a></li>
  </ul>
  <pre>
    <!-- この間に書いたものがハイライトされる -->
  </pre>
</div>

<pre>の手前にスイッチを追加するだけなら外側をラッパーで囲む必要はないのですが、切替時の処理を1箇所のクラスのON/OFFだけで済むようにしたくてこのようにしてみました。

 

また、CSSは以下になります。

/* コードエリア */
pre {
  overflow: auto;
  word-wrap: normal;
}

/* コードエリア（折り返し時） */
.code-wrapper.wrap pre {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}

/* 折り返しスイッチ */
.code-wrapper ul.wrap-switch {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 11px;
}
.code-wrapper ul.wrap-switch li {
  margin: 0 10px 0 0;
  padding: 0;
  display: inline;
}
.code-wrapper ul.wrap-switch a {
  cursor: pointer;
  text-decoration: none;
  text-shadow: 1px 1px 3px #fff;
}
.code-wrapper ul.wrap-switch a.wrap-on {
  color: #bbb;
}
.code-wrapper.wrap ul.wrap-switch a.wrap-on {
  color: #666;
}
.code-wrapper ul.wrap-switch a.wrap-off {
  color: #666;
}
.code-wrapper.wrap ul.wrap-switch a.wrap-off {
  color: #bbb;
}
.code-wrapper ul.wrap-switch a:hover,
.code-wrapper ul.wrap-switch a:active {
  color: #666;
}

ここで一番悩んだのが、折り返すための「word-wrap」「word-break」「white-space」あたりの指定です。ブラウザの種類やバージョンによって挙動がまちまちなのですが、とりあえずは上記の形で落ち着きました。

 

jQueryでワードラップ切り替えスイッチを自動挿入

見た目が完成したので、あとはJavaScriptで自動的にコードを整形してやります。（要jQuery）

jQuery(document).ready(function($){
  // pre要素をラッパーで囲む
  $('pre').wrap('<div class="code-wrapper"></div>');   // 切り替えスイッチ用jQueryオブジェクトを作成
  var wrap_switch_obj = $('<ul class="wrap-switch"><li><a class="wrap-on">WRAP</a></li><li><a class="wrap-off">NO WRAP</a></li></ul>');
  $('.wrap-on', wrap_switch_obj).click(function(){
    $(this).parents('.code-wrapper').addClass('wrap');
  });
  $('.wrap-off', wrap_switch_obj).click(function(){
    $(this).parents('.code-wrapper').removeClass('wrap');
  });   // ラッパー内にスイッチを追加
  $('.code-wrapper').prepend(wrap_switch_obj);
});

これでひとまず完成。

ただ、このままでは内容が短く改行の必要がない場合でも切り替えスイッチが表示されるのでちょっと残念な感じ。なので、必要な時だけスイッチが表示されるようにしたいなぁと・・・。

ということで次回に続きます。

続きの記事: シンタックスハイライト改良：特定エリアのスクロールバーの有無を判定