SyntaxHighlighterが正常に表示されない場合の対策

こんにちは！ぐち（@bloguchi）です。

先日このブログのテーマを変えたのですが、スマートフォンから見たときにソースコードを表示するのに利用しているプラグイン「SyntaxHighlighter」が正常に動かなくなりました。

おかしいなーと思い調べてみると同様の現象を解決されているではありませんか。

さっそく僕もプラグインのコードを修正してみました。

ソースコードをハイライト表示

ハイライト表示というのは、特定のキーワードなどをカラーリングして表示することを指します。IDE(統合開発環境)などでプログラムを書いたことのある人はピンとくると思いますが、簡単に言いますとソースコードを「見やすくする」機能ですね。

テキスト表示といいますか通常の文字として表示すると下記のようになります。

class Main {
    public void main(String[] args) {
        Hoge hoge = new Hoge();
    }
}

それをソースコード用にハイライト表示するとこのようになります。

class Main {
    public void main(String[] args) {
        Hoge hoge = new Hoge();
    }
}

見やすくなったでしょ？またプラグインの機能により行番号も表示されていて、ソースコードっぽさが増しますよね。これがハイライト表示です。

SyntaxHighlighter

WordPressのプラグインに、このソースコードのハイライト表示を簡単に実現できるものが公開されています。それが「SyntaxHighlighter」です。

僕も一応エンジニアの端くれとして技術的な記事を書くために、ソースコードを表示する機会が多いので導入しています。

が、冒頭でもお伝えした通り今利用させて頂いているテーマにするとスマートフォンで見たときに正常に表示されなかったので、その対策方法をご紹介します。

エラー

スマートフォンで見たときに下記のエラーが出ていました。なんだかノードがおかしい風ですね。詳細はよくわかりません！笑

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

で、これをどうやって修正するかといいますと、かの偉大なGoogle大先生は次のようにいいました。

プラグインの修正

SyntaxHighlighterのソースコードを次のように修正しましょう。

プラグインの編集画面を開きます。

編集するプラグインを選択します。

編集箇所を検索します。「document.getElementsByTagName」で検索してください。

下記の通り修正して「ファイルを更新」をクリックします。修正箇所は2箇所あります。

■ 1箇所目

document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );

// ↑をコメントアウトして↓を追加します。

document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );

// 修正後

//        document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );

■ 2箇所目

document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );

// ↑をコメントアウトして↓を追加します。

document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );

// 修正後

//        document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
document.getElementById("syntaxhighlighteranchor").parentNode.insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );

ファイルの更新が成功したら完了です。

スマホで表示する

プラグインの修正が完了したらスマホの実機でもいいですし、ChromeなどにあるデベロッパーツールなどでシミュレートしてもOKです。

問題なく「ソースコードっぽく」表示されていれば完了です。

見た目でもすぐにわかりますが、画面幅からはみ出している領域を見るために横スクロールできるかどうかでもプラグインが機能しているか確認できます。

導入の目的

めちゃくちゃシンプルです。それは・・・

なんかカッコイイからです。笑

あとはやっぱりソースコードっぽく見えたほうが読者の皆さまも読みやすいですし、やっぱりなんかカッコイイからです。笑

では今回はこの辺で。