【ココログ】モバイル表示時にSyntaxHighlighterが効かない時の対処方法

どうも、かげさんです(^^)/

モバイル表示時の見た目がおかしいところを少しずつ直しています。

ソースコードを表示するときは、
開発言語の文法に合わせてコードの色や強調表示を変える
SyntaxHighlighter を使うと便利です。

PC版のHTMLでは対応していた SyntaxHighlighter が、
モバイル表示で効いてません。

これの対処方法を紹介します。

SyntaxHighlighter が効いていない理由

以前に対応した SyntaxHighlighter のロジックは
HTML の head部に CSS や JavaScript を記述するものでした。

head部に記述する方法は、PC版でしか使えません。

モバイル版のテンプレートは、
ココログプロで上級テンプレートを使っていても
ユーザーがメンテナンスできないためです。

対処方法

モバイル版の HTML でユーザーが介入できるのは
ブログのサブタイトルのところだけです。
そこに SyntaxHighlighter のロジックを入力して対処します。

また、HTML の head部に記述していた SyntaxHighlighter のロジックがあると
PC版側では、CSS や JavaScript の二重定義になるので削除します。

ブログのサブタイトルの設定

ブログのサブタイトル部分にHTMLを書く時の注意点として
「MTタグが使えない」というのがあります。

もともと、HTML の head部にあったコードでは
下記のように<$MTBlogURL$>というMTタグがありました。

<link href='<$MTBlogURL$>styles/shCore.css' rel='stylesheet' type='text/css'/>

PC版のテンプレートだと<$MTBlogURL$>は、ブログのURLに置換されます。
このブログだと、
https://kage3.cocolog-nifty.com/blog/ です。

ブログのサブタイトル内では、<$MTBlogURL$>を使わず、
https://kage3.cocolog-nifty.com/blog/ と直接書きます。

また、PC版とモバイル版で共通で使う CSS の記述位置ですが
SyntaxHighlighterの後ろにしました。

理由は、SyntaxHighlighter でも CSS の記述があるので、
PC版とモバイル版で共通で使う CSS の設定で
CSS を上書きできるようにするためです。

かげさんの最終的な「ブログのサブタイトル」は、こうです。

刻むぜ歴史！　ポツポツ日が開いたりしながらも、かげさん、地道に更新継続中！<br />2005年1月11日からの歴史ここにあり！</h2>

<!-- ◆MTタグ使用禁止 ここから -->



<!-- ◆SyntaxHighlighter ここから -->

<link href='https://kage3.cocolog-nifty.com/blog/styles/shCore.css' rel='stylesheet' type='text/css'/>

<link href='https://kage3.cocolog-nifty.com/blog/styles/shThemeEmacs.css' rel='stylesheet' type='text/css'/>

<script src='https://kage3.cocolog-nifty.com/blog/scripts/shCore.js' type='text/javascript'></script>

<script src='https://kage3.cocolog-nifty.com/blog/scripts/shAutoloader.js' type='text/javascript'></script>

<script src='https://kage3.cocolog-nifty.com/blog/scripts/shBrushXml.js' type='text/javascript'></script>

<script type="text/javascript">

window.addEventListener('DOMContentLoaded', function() {

    // Luaだけscriptsフォルダではなくfilesな理由は

    // 2019/03のココログリニューアルでファイルアップロードの仕様変更

    SyntaxHighlighter.autoloader(

          "cpp                      https://kage3.cocolog-nifty.com/blog/scripts/shBrushCpp.js"

         ,"css                      https://kage3.cocolog-nifty.com/blog/scripts/shBrushCss.js"

         ,"bat com cmd              https://kage3.cocolog-nifty.com/blog/files/shbrushbat.js"

         ,"html xml xhtml           https://kage3.cocolog-nifty.com/blog/scripts/shBrushXml.js"

         ,"js jscript javascript    https://kage3.cocolog-nifty.com/blog/scripts/shBrushJScript.js"

         ,"java                     https://kage3.cocolog-nifty.com/blog/scripts/shBrushJava.js"

         ,"lua                      https://kage3.cocolog-nifty.com/blog/files/shbrushlua.js"

         ,"perl pl                  https://kage3.cocolog-nifty.com/blog/scripts/shBrushPerl.js"

         ,"plain text               https://kage3.cocolog-nifty.com/blog/scripts/shBrushPlain.js"

         ,"php                      https://kage3.cocolog-nifty.com/blog/scripts/shBrushPhp.js"

         ,"ruby rails ror rb        https://kage3.cocolog-nifty.com/blog/scripts/shBrushRuby.js"

         ,"python py                https://kage3.cocolog-nifty.com/blog/scripts/shBrushPython.js"

         ,"sql                      https://kage3.cocolog-nifty.com/blog/scripts/shBrushSql.js"

         ,"vb                       https://kage3.cocolog-nifty.com/blog/scripts/shBrushVb.js"

    );

    // ココログはblogger.comのものではないのでfalse

    SyntaxHighlighter.config.bloggerMode = false;

    // ソースにカーソルをのっけると，クリップボードにコピーなどのflashがでてくる設定

    // しかし、Adobe Flashが2020年に終了するのでコメントアウト

    // 2019/10現在、chromeではFlash Playerは、許可がないと使えなくなっているし

    // ソースコードの部分をダブルクリック（ソース部分が全選択される）後にコピーできるため

    //SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';

    // 改行を無視する

    SyntaxHighlighter.config.stripBrs = true;

    // ソースコード画面内で自動的にリンクを作らない

    SyntaxHighlighter.defaults['auto-links'] = false;

    // ソースコード画面の右上の「?」マークを消す

    SyntaxHighlighter.defaults['toolbar'] = false;

    SyntaxHighlighter.all();

});

</script>

<!-- ◆SyntaxHighlighter ここまで -->



<!-- ◆PCとモバイル兼用のCSS -->

<!-- 　SyntaxHighlighter のCSSを必要なら上書きできるよう、SyntaxHighlighterより後ろに定義 -->

<link rel="stylesheet" href="https://kage3.cocolog-nifty.com/blog/common_style.css" type="text/css" />



<!-- ◆MTタグ使用禁止 ここまで -->

<h2>

まとめ

• モバイル表示時にSyntaxHighlighterが効くように
  ブログサブタイトルのところで、SyntaxHighlighter関連ロジックを記述する。
• PC版とモバイル版で共通で使う CSS の設定は、
  SyntaxHighlighterの後ろにする。

モバイル版テンプレートを修正できないのは、やはりめんどくさいです。

Movable Type系のTypepadのように
ココログがモバイル版テンプレートに割り込みできる
テンプレートモジュールを提供してくれると、助かりますね。