SyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法

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

SyntaxHighlighterだけでも遅いのにFleXcrollを併用してからめちゃくちゃ表示が遅くなりました。もう少しスマートな導入方法を整理してみました。(2015.9.25追記。テーマ変更を機にfleXcrollの使用はやめました。）

もう一度デフォルトテンプレートから設定してIE8の表示がおかしい原因をさがす

（追記　結論としてはIE8の表示がおかしいのはSyntaxHighlithter+fleXrollが原因ではありませんでした。Blogger:IE8で背景の色が消える問題(1)どのあたりが原因かはわかったへどうぞ。）

あれこれ削ったりしてみたのですがIE8の表示がおかしなところがつかめませんでした。

IE8の表示を確認しながらデフォルトテンプレートからSyntaxHighlighterとfleXcrollの導入をしています。

さらに前回はfleXenv.updateScrollBars();を使ってfleXcrollを2回適用させていましたが、これも無駄なので再適用させないでいいように工夫しました。

まずSyntaxHighlighterの導入。

Blogger:SyntaxHighlighter(4)オートローダーで必要なブラシファイルのみロードする

<link href='shCore.cssのURL' rel='stylesheet' type='text/css'/>
<link href='shThemeDefault.cssのURL' rel='stylesheet' type='text/css'/>
<script src='shCore.jsのURL' type="text/javascript"></script>
<script src='shAutoloader.jsのURL' type="text/javascript"></script>

まずはこれらをテンプレートHTMLの</head>の上行に入力します。

shCore.cssもデフォルトのままです。

以下の部分を</body>の上行に挿入します。

<script type='text/javascript'>
  function path(){
    var args = arguments,
      result = [];
    for(var i = 0; i &lt; args.length; i++)
      result.push(args[i].replace('@', 'GoogleサイトにアップしたブラシファイルのページのURL/'));
    return result
  };
 SyntaxHighlighter.autoloader.apply(null, path(
   'applescript            @shBrushAppleScript.js',
   'actionscript3 as3      @shBrushAS3.js',
   'bash shell             @shBrushBash.js',
   'coldfusion cf          @shBrushColdFusion.js',
   'cpp c                  @shBrushCpp.js',
   'c# c-sharp csharp      @shBrushCSharp.js',
   'css                    @shBrushCss.js',
   'delphi pascal          @shBrushDelphi.js',
   'diff patch pas         @shBrushDiff.js',
   'erl erlang             @shBrushErlang.js',
   'groovy                 @shBrushGroovy.js',
   'java                   @shBrushJava.js',
   'jfx javafx             @shBrushJavaFX.js',
   'js jscript javascript  @shBrushJScript.js',
   'perl pl                @shBrushPerl.js',
   'php                    @shBrushPhp.js',
   'text plain             @shBrushPlain.js',
   'py python              @shBrushPython.js',
   'ruby rails ror rb      @shBrushRuby.js',
   'sass scss              @shBrushSass.js',
   'scala                  @shBrushScala.js',
   'sql                    @shBrushSql.js',
   'vb vbnet               @shBrushVb.js',
   'xml xhtml xslt html    @shBrushXml.js'
 ));
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.defaults['toolbar'] = false;
 SyntaxHighlighter.all();
</script>

ここでChromeとIE8の表示を確認します。


shCore.cssがデフォルトのままですので不要な縦スクロールバーも表示されています。


IE8では既に縦スクロールバーが表示されていません。

shCore.cssの.syntaxhighlighterに縦スクロールバーを消すoverflow-y: hidden !important;とiOS Safariの行ずれを修正する-webkit-text-size-adjust: 100%;を追加します。

.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important;
-webkit-text-size-adjust: 100%;
}

Chromeでは不要な縦スクロールバーが消え、IE8の表示は先ほどど変化ありません。

これでSyntaxHighlighterの導入は完了です。

fleXcrollの適用前にSyntaxHighlighterにjQueryでheightを設定しておく

SyntaxHighlighterにfleXcroll(2)fleXcrollはheight: auto;がサポートされずではfleXcrollを適用してからheightを設定しましたが、今度は逆の順序にします。

SyntaxHighlighterにflexcroll_heightというclassをデフォルトで設定します。

</body>の上行に挿入した SyntaxHighlighter.all();の上行に以下を追加します。

SyntaxHighlighter.defaults['class-name'] = "flexcroll_height";

この下に以下を導入します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
   $(window).load(function () {
         $.each($('.flexcroll_height'), function(){$(this).height($(this).find("table").height()+17);});
         $('.flexcroll_height').addClass("flexcroll");
      });
</script>

jQueryでflexcroll_heightクラスがついた<div>それぞれにその中にあるtableのheightを測定してflexcroll_heghtクラスの<div>にそのheightを設定します。

さらにflexcroll_heightクラスがついた<div>にflexcrollクラスを追加します。

再度表示を確認しましたがIE8は特に問題ありません。

$(window).loadを$(document).readyにするとfleXcrollは適用されませんでした。

shChore.cssをfleXcroll用にカスタマイズ

まずは最初にでてくる.syntaxhighlighter div,を/*と*/でコメントアウト。

Chrome、IE8ともに影響なし。

次に以下を導入。

.flexcroll_height{
 overflow: visible !important;
}

ともに影響なし。

最後にfleXcrollの導入。</body>の上行に以下を挿入。

<link href='flexcrollstyles.cssのURL' rel='stylesheet' type='text/css'/>
<script src='flexcroll.jsのURL' type='text/javascript'/>

あれ？ともにきれいにfleXcrollのスクロールバーに置き換わっています。

ところが同じ方法をこのブログに導入しなおしてもIE8はおかしな表示のままです。

どうしたらいいのやら、、、