SyntaxHighlighterにfleXcroll(1)カスタムスクロールバーを表示させる

コード量が少ないときにSyntaxHighlighterで表示される横スクロールバーが目立ちすぎるのでこれをカスタマイズしたいと思いました。そもそもそれがしたいためにfleXcrollを導入したのでした。

class="flexcroll"を加えただけでは表示されず

Blogger:fleXcrollでスクロールバーをカスタマイズでみたようにfleXcrollのスクロールバーのカスタマイズはdivタグにclass="flexcroll"を加えればよいはず。

fleXcrollはBlogger:fleXcrollで画像ファイルを使ってスクロールバーをカスタマイズで設定します。

fleXcrollのコードはSyntaxHighlighter.all();より下にもってこないとSyntaxHighlighterには適用されませんでした。

SyntaxHighlighterはBlogger:SyntaxHighlighter(5)Configulationを設定するでみたように簡単にclassが設定できます。

SyntaxHighlighter.all();はBlogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードするで</body>の上行にもってきたので、fleXcrollのコードを加えると以下のようになります。

    SyntaxHighlighter.defaults['class-name'] = "flexcroll";
　  SyntaxHighlighter.all();
  </script>
  <link href="GoogleサイトのURL/flexcrollstyles.css" rel="stylesheet" type="text/css" />
  <script type='text/javascript' src="GoogleサイトのURL/flexcroll.js"></script>
</body>

これでテンプレートを保存してページを見てみます。

変化無しです。fleXcrollのclassがどうなったか調査します。

ChromeでSyntaxHighlighterの中で右クリックし「要素を検証」を選択します。

すると画面の下にいまのページの要素がみれます。

要素が表示されたウィンドウでマウスポインタを動かすとマウスポインタをおいた要素に相当する部分がページの上に表示されます。


これがSyntaxHighlighterの一番外の要素になります。

「.flexcroll」とあるのでちゃんとfleXcrollが適用されているようです。

fleXcrollのカスタムスクロールバーはどこにいったのでしょう？

.syntaxhighlighter divのCSSを削除

fleXcrollのみの状態と比較した結果、scrollwrapperクラスがカスタムスクロールバーを表示させていることがわかりました。

SytanxHighlighterのtableの下のほうにscrollwrapperクラスが設定されたdivがあります。


高さが0pxになってしまっています。

要素を表示させている部分でこのdivの部分をクリックすると右のウィンドウにこのdivに適用されているstyleが表示されます。

これはJavaScriptで設定されたStyleが反映されているようです。


取り消し線が引いてあるというのは他のところで上書きされているということです。

その下のMatched CSS Rulesをみるとこのdivには.syntaxhighlighter divのCSSが上書きされていることがわかります。

shCore.cssを編集してこのCSSルールを消しちゃいましょう。

shCore.cssの最初に出てくる.syntaxhighlighter divを/* */で挟んでコメントアウトします。

.syntaxhighlighter a,
/*.syntaxhighlighter div,*/
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;

今度は高さが85pxになってfleXcrollの縦スクロールバーが表示されました。

.syntaxhighlighter.flexcroll.flexcrollactiveにoverflow: visibleを設定

横スクロールバーがないのでこれではだめです。

スクロールバーが表示させるかどうかはoverflowプロパティで決まるのでそれらをいじってみます。

Chromeの要素の検証画面では要素のプロパティの項目にマウスポインタをもってくるとそれぞれの項目の先頭にチェックボックスが表示されます。

これらのチェックをはずすことでリアルタイムでそのプロパティの結果をみることができます。

一番外の要素のclass="syntaxhighlighter flexcroll xml flexcrollactive"の部分をクリックして右のウィンドウでプロパティをみてみます。

Styleｓにoverflow: hiddenがあります。

これら3つのoverflowプロパティのチェックボックスをつけたりはずしたりしてみます。

2x2x2=8通り試せばよいはずです。

（レレレ、レレ□、レ□レ、レ□□、□レレ、□レ□、□□レ、□□□）

Styles 　　　　　　　overflow: hidden
.syntaxhighlighter  overflow: auto
.syntaxhighlighter  overflow-y: hidden

すると全部チェックをはずした□□□のときにfleXcrollの縦横のスクロールバーが表示されました。


ちょっと正解に近づきましたね。

hiddenもautoも適応しないということはvisibleにするということになります。

class="syntaxhighlighter flexcroll xml flexcrollactive"のうちxmlは使うブラシによって変わるのでその他のclassが揃ったdivにoverflow: visibleを設定します。

shCore.cssに以下を追加します。上書きされないように!importantをくっつけておきます。

.syntaxhighlighter.flexcroll.flexcrollactive{
 overflow: visible !important;
}

何もしなくても先ほどと同じようにfleXcrollのカスタムスクロールバーがみえているはずです。

こんどは縦スクロールバーを表示させない設定に取り掛かります。

次の関連記事:SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされず