SyntaxHighlighterのLua対応

SyntaxHighlighterのLua対応には、
Lua構文に合わせた色分け表示する「shBrushLua.js」が必要だ。

最終的にSyntaxHighlighter 3.0.83用の
下記のリンクにある「shBrushLua.js」を使うことにした。
SyntaxHighlighter 3.0.xx , lua brush shBrushLua.js

SyntaxHighlighter導入当時のかげさんも
「shBrushLua.js」をネットで探して
ココログにアップロードしてはいた。

しかし、インターネットで見つかる「shBrushLua.js」は
SyntaxHighlighter のバージョンによって使えるファイルが違うようで
他の scripts/shBrush*.js の中身を眺めて、
似たような記述がされてるファイルを探さないとダメっぽいことが
下記の記事に書いてあった。

この日記ページでLua言語の色分け表示ができるように指定

ココログにアップロードしたSyntaxHighlighterのバージョンは
3.0.83

http://alexgorbatchev.com/SyntaxHighlighter/
に書かれている最新バージョンと同じものだ。

かげさんのマシンで「shBrushLua.js」を探すと
2008年のもの、2011年のものなど、いくつか見つかった。

ココログにアップロードした「shBrushLua.js」は
Luaの「C API」、「auxiliary library」にも対応したものだった。

拾ってきた「shBrushLua.js」の中で古いファイルであるものの
C API、auxiliary library対応しているものがあって
それを参考に、かげさんが改良したバージョンだ。

が、改良のベースにしたファイルも
改良の参考にしたファイルも古かったようで
SyntaxHighlighterの3.0.83には合っていなかったみたい。

最終的にここの「shBrushLua.js」を使うことにした
SyntaxHighlighter 3.0.xx , lua brush shBrushLua.js

記事で使われている文字から察するに韓国の人が書いた記事みたい。

ここにある「shBrushLua.js」は
WordpressのWP SyntaxHighlighterプラグインで使うLua対応のスクリプトで
SyntaxHighlighter 3.0.83に対応したものなので安心だ。

本来なら、以前にアップロードした「shBrushLua.js」と
使うことにした「shBrushLua.js」を差し替えたいところだ。

しかし、ココログの2019/03のリニューアルに伴う仕様変更で
ココログのコントロールパネルにあるファイルマネージャでは
アップロード済みのファイルの中身の確認と削除しかできなくなってしまった。

リニューアル後は、アップロード先がblog/filesディレクトリに固定されていて
今まで保存してたblog/scriptsディレクトリのファイルと置き換えできないのだ。

他の「shBlushXX.js」と同じディレクトリに入れたかったが
仕様上、できないものはできないので
「shBrushLua.js」だけ別フォルダに入れるしか無かった。

幸い、SyntaxHighlighterでは、
各「shBlushXX.js」の格納場所は下記のように指定できる。

<script src="<$MTBlogURL$>scripts/shBrushXml.js" type="text/javascript"></script>

<$MTBlogURL$>は、MovableTypeのタグ（通称MTタグ）で
ブログのURLが自動的に入るので、
今回のLua用定義ファイルの格納場所指定は、下記のようにすれば良い。

<script src="<$MTBlogURL$>files/shBrushLua.js" type="text/javascript"></script>

ただ、このように増やしていくと、
ブログ記事によっては、使わないスクリプトも読み込むので
ページ表示に時間がかかってしまう。

例えば、今回の記事ではC++用の記載はないので
C++用の定義ファイルは読み込む必要がないのに常に読み込んでしまうのだ。

この問題の解決方法として
SyntaxHightlighter3.xからautoloaderという仕組みがある。

【JAVASCRIPT】SYNTAXHIGHLIGHTER 3.0 の新機能と注意点

autoloaderを使うと
各定義ファイルが必要になった時点でロードされるようになり
余分なファイルを読んでおく必要がない。

うちで使うのは、3.83なのでautoloaderを使うべきだ。

autoloaderの記述は、HTMLのhead要素内に
window.onloadに関数として代入するように書く。
（もっと良い方法は後述する）

JavaScriptは、上から順に実行されていく。

HTMLのhead要素内にautoloaderの記述を書いても
各定義ファイルが必要になるか分かるのは、
body要素を解析した後。

このため、単純にhead要素内に書いても、
全部を読み込まないと必要かどうかの判断ができず
全部を読み込んでからになるので表示が遅くなってしまう。

bodyの閉じタグの直前に書けば
Webページが表示された後にJavaScriptが読み込まれるので、
体感的に速く表示される。

ただし、bodyの閉じタグ直前に書いても、
必ずDOMのレンダリングが完了していることは保証されない。

このブログは、htmlのhead要素の最後にテンプレートを
挿入するようにしてるので、
bodyの閉じタグの前にJavaScriptを書くよりも
head要素内に記述したほうが良い。
既存のテンプレートを修正する必要がないんで。

window.onloadに関数として代入するように書くと
DOMのレンダリングが完了してから実行されるようになる。

しかし、普通は、window.onloadを書くとうまくいくはずなのに
うちでは、うまく動いてくれなかった…orz

preタグのbrushとしてluaを指定してても
SyntaxHighlighterの機能が効かず、
通常のpreタグのスタイルで表示されてる…

ココログのテンプレートにあるヘッダ部分には、
window.onloadが他にないし動くはずなんだが…

もしや、ヘッダ以外でwindow.onloadを使っているところがある？

調べてみたら、左サイドバーのテンプレートにも
window.onloadを使っているところがあった…orz

なるほど、window.onloadで動くJavaScrpitが2箇所で書かれてたら
うまく動かなくても不思議じゃないわ…

サイドバーのテンプレートはbody要素内だから
普通に考えて、window.onloadに関数を代入するんだから
後からの方が有効になってそう。

【JavaScript入門】onloadイベントの使い方とハマりやすい注意点とは
の「2.2 複数のwindow.onloadを書いた場合」によると想像通り
後勝ちになるようだ。

実は、この記事を作るに当たり上記のサイトを調べるまで
「複数のonloadがあるのが問題だから、１つにする」
ようにしていた。

が、上記のサイトを見ると
複数のonloadをどう解消するaddEventListenerや
onloadより高速動作するイベントDOMContentLoadedについて書かれていた。

調べて良かったわ！
裏取り調査は必要ね！　(・∀・)

<script src="<$MTBlogURL$>scripts/shCore.js" type="text/javascript"></script>

<script src="<$MTBlogURL$>scripts/shAutoloader.js" type="text/javascript"></script>

<script src="<$MTBlogURL$>scripts/shBrushXml.js" type="text/javascript"></script>

<script type="text/javascript">

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

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

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

    SyntaxHighlighter.autoloader(

          "cpp                      <$MTBlogURL$>scripts/shBrushCpp.js"

         ,"css                      <$MTBlogURL$>scripts/shBrushCss.js"

         ,"html xml xhtml           <$MTBlogURL$>scripts/shBrushXml.js"

         ,"js jscript javascript    <$MTBlogURL$>scripts/shBrushJScript.js"

         ,"java                     <$MTBlogURL$>scripts/shBrushJava.js"

         ,"lua                      <$MTBlogURL$>files/shbrushlua.js"

         ,"perl pl                  <$MTBlogURL$>scripts/shBrushPerl.js"

         ,"plain text               <$MTBlogURL$>scripts/shBrushPlain.js"

         ,"php                      <$MTBlogURL$>scripts/shBrushPhp.js"

         ,"ruby rails ror rb        <$MTBlogURL$>scripts/shBrushRuby.js"

         ,"python py                <$MTBlogURL$>scripts/shBrushPython.js"

         ,"sql                      <$MTBlogURL$>scripts/shBrushSql.js"

         ,"vb                       <$MTBlogURL$>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>

なお、今のココログだと「shBrushLua.js」をアップロードすると
ファイル名が「shbrushlua.js」のように
大文字が小文字に変換されてアップロードされるため
定義ファイル名指定で
定義ファイル名の文字列を小文字にしないと
定義ファイルが見つからない状態になってしまうのが厄介なところ。