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はおかしな表示のままです。

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

うーん、よく考えたらfleXcroll導入前にIE8は見たことがなかったのでいつから変になったのか気づかなかったのかも。

何が原因かさかのぼってみます。

参考にしたサイト


jqueryで属性を変更させる方法
jQueryでclassを追加する方法

Jqueryで指定したIDのclassを変更したい - Yahoo!知恵袋
jQueryでclassを置換する方法

次の関連記事:SyntaxHighlighterにfleXcroll(4)IEだけ$(window).loadのタイミングが違うらしい

PR

0 件のコメント:

コメントを投稿