waka8*stakes

〜馬絵+林檎+Wordpress〜

Syntaxhighlighter3.0.83で長い行を折り返して表示する

sh-custom
Bootstrapを使ったwebサイトでは動作しなくなります。なので現在Bootstrapを組み込んだテーマを使用している当サイトでは既につかっておりませんm(__)m

なぜ折り返したいか

ブロガー様達におなじみの、ソースコードを綺麗に魅せるSyntaxHighlighter。当サイトでは(2012年3月末現在)最新のVer.3.0.83を使ってます。この最新版はautoloaderとかコードの前にタイトルが付けられたりとか便利な機能が追加されたんですが行の折り返しが出来ない仕様になってるようで、Androidスマートフォンで見たらボックスからはみ出した部分がスクロール出来ず全く見えないのです(『ボックスからあふれる内容があってもスクロールさせない』のは泥ブラウザの仕様?)。PCでも横スクロールなしに全部表示出来た方がいいかなと思って弄ってみました。

sh-unscrollable

WPtouchなりスマフォ向け表示プラグインがあるのに

せっかくの『画面幅に応じてデザインを損なわず柔軟な表示ができる』TwentyElevenの子テーマを作って親のいいとこどりして使いたいからわざわざスマフォ専用ページ用意する事無いかなと思ってますのでスマフォプラグイン導入は今のところ考えてません。

2.x系は折り返し設定ができるのに3.0ではなぜできないのか

長く続けられてるブログ様では今も2.x系のSyntaxHighlihgterをお使いのところもあります。溢れる行を折り返してスクロールさせる事無く全部表示出来るのが作者閲覧者共に使い勝手が良いからなのか3.0に更新せずにお使いなのかなと思います。

画面一杯にブラウザを広げないと大概のブログで横スクロールバーがでる狭い環境ではコードに横スクロールバーが出てると見づらいのです。

なぜ3.0では長い行の折り返しが封じられてしまったのか、その理由はSyntaxHighlighterが吐くソースコードにあるようです。

2.xのソース[表示される部分のみ]

<div class="lines"><!-- コード表示 -->
 <div class="line alt1"><!-- 1行 -->
  <table>
   <tbody>
    <tr>
     <td class="number"><code>1</code></td><!-- 行番号 -->
     <td class="content"><code class="(aliase)">text</code></td><!-- コード -->
    </tr>
   </tbody>
  </table>
 </div><!-- 1行ここまで -->
</div><!-- コード表示ここまで -->

1行をテーブルで囲み、行番と対応する行がきっちり横並びになってます。

3.0.83のソース[同上]

<table border="0" cellpadding="0" cellspacing="0">
 <tbody>
  <tr>
   <td class="gutter"><!-- 行番号セル。行の数だけ番号をdivで囲んで縦に並べる -->
    <div class="line number1 index0 alt2">1</div><!-- 1行目 -->
    <div class="line number2 index1 alt1">2</div><!-- 2行目 -->
    <div class="line number3 index2 alt2">3</div><!-- 3行目 -->
    <div class="line number4 index3 alt1">4</div><!-- 4行目 -->
   </td><!-- 行番号セルここまで -->
   <td class="code"><!-- コードを表示するセル -->
    <div class="container">
     <div class="line number1 index0 alt2"><code class="(aliase)">text</code></div>
     <div class="line number2 index1 alt1"><code class="(aliase)">text</code></div>
     <div class="line number3 index2 alt2"><code class="(aliase)">text</code></div>
     <div class="line number4 index3 alt1"><code class="(aliase)">text</code></div>
    </div>
   </td><!-- コードを表示するセルここまで -->
  </tr>
 </tbody>
</table>

表示全体を一つのテーブルで囲み、左は行番だけを縦に並べ、右にコードと分けてしまってるので行番とコードが関連づけられない無理矢理マークアップに見えます。1行がどんなに長くても折り返すと行番号と対応する行が横並びにならずにずれておかしくります。このためどんなに長く書かれた行でも絶対に折り返しをさせない仕様になってるみたいです。

なので無理矢理折り返し可能にするためにスタイルを弄ります。

SyntaxHighlighterのスタイルを弄る

firebugで適応されているスタイルを調べてみるとshCore.cssの

.syntaxhighlighter .line {
white-space:pre !important;
}

のために折り返しされないようになってます。
上記のprenormalpre-wrapに変え、てみるとテキストの折り返しが効くようになります。

/*長い行の折り返し有効化*/
.syntaxhighlighter .line {
white-space:pre-wrap !important;
word-wrap: break-word !important;
}

IEに対応させるにはword-wrap: break-word !important;を付けると良いと思います。が、しかし…

例えば、こう表示されなければならないのに

1|<!DOCTYPE html>
2|<html dir="ltr" lang="ja" xmlns:fb="http://
 |www.facebook.com/2008/fbml" xmlns:og="http://
 |ogp.me/ns/fb#"   xmlns="http://www.w3.org/1999/
 |xhtml" dir="ltr" xmlns:og="http://ogp.me/ns#" 
 |xmlns:fb="http://www.facebook.com/2008/fbml">
3|<head>
4|<meta charset="UTF-8">

3.0なら上記の無理矢理なソースなのでこんな風になってしまいます。

1|<!DOCTYPE html>
2|<html dir="ltr" lang="ja" xmlns:fb="http://
3|www.facebook.com/2008/fbml" xmlns:og="http://
4|ogp.me/ns/fb#" xmlns="http://www.w3.org/1999/
  xhtml" dir="ltr" xmlns:og="http://ogp.me/ns#" 
  xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
  <meta charset="UTF-8">

行番号の意味がなくなってしまいます。だったら行番号を消してしまいましょう!

/*shCore.cssまたはshCore〜.css*/
.syntaxhighlighter .gutter{
display: none;//行番号を非表示
}

と無理矢理見えなくするのも良いですが、始めから行番号を出さないようにするのがいいです。

特定のコードだけ行番号を出したくないならpreタグのclassにgutter: falseを追加するとそこだけ行番が非表示になります。

<pre class="brush: (aliase); gutter: false;">

今まで書いたコード全部行番表示したくなかったら

SyntaxHighlighter.all();

の前に

SyntaxHighlighter.defaults['gutter'] = false;

を入れると行番号を表示しなくなります。行番が表示されてないのでコードをダブルクリックしなくてもそのままコピペできます。

めでたくスマフォでもコードが全部表示されるようになりました。

sh-all-code-visible

参考サイト

ありがとうございました。

SyntaxHighlighterの表示を好きな色のしましまにする

コード表示行には1行毎に『.alt1』『.alt2』とクラスが振られてます。使用中のshTheme〜.cssかshCore〜.cssの以下の部分を編集します。

.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}

それぞれの値の『white』を違う色名または色コードに変えます。しましまにすると行の境目が分かり、より見やすくなるかなと思います。もちろんスマフォでもしましまスタイルは効いてますw