難関はhtmlタグのエスケープ

前記事「Syntax Highlighterを思いっきり変更してみた。」でhtmlタグのエスケープは他力本願したと書いた元のブログが

preタグ内にHTMLを入れてJavaScriptでエスケープすると便利

そのまま転記させていただくと、対象htmlページの<pre>タグ内にある<山括弧>や&がほとんど置き換えられるので、おっしゃこれでSyntax Highlighterプラグインとお別れできるー!!と大喜び。

var escapeHtml = (function (String) {
    var escapeMap = {
        '&': '&',
        "'": ''',
        '`': '`',
        '"': '"',
        '<': '<',
        '>': '>'
    };
        // ・・・中略・・・
}(String));
var pre = document.querySelectorAll('pre');
for(var i = 0; i < pre.length; i++) {
    pre[i].innerHTML = escapeHtml(pre[i].innerHTML);
}

ほとんどそのまま使わせていただいているが、<pre>・・・</pre>タグ内すべてだと、うちでは都合の悪い場合があったので、置き換え対象となる

var pre = document.querySelectorAll('pre');

部分を、html elementとしての「pre」ではなく「任意のclass名」で囲われたエリアに変更した。

var pre = document.querySelectorAll('.html');

 

先に書いていた記事で「ややこしい事」をしてたのが功を奏するケースがままあって、

<?php + ?>
<body> + </body>

この二つはエスケープJSでも弾かれるので・・・そら当然、Bodyの中に<body>タグを素で書いたりしちゃいかんですわね(汗)

となると選択肢は二つですよね。 文章として、<body> + </body>の中に以下のソースを書くーとしてしまう。 <?php の後に・・・と書く、みたいな日本語でのカバー。

でもズボラなのと、あくまで「プラグインと同じ仕様が外見上成立する」がテーマだったのでCSSでカバーすることにした。 何しろhtmlタグをそのまま書くって、さほどないんですね。(いやたった3記事でもう1回あったけど)

CSSやスクリプトを転記するのに、毎度働いてくれなくても良いわけなので 「&lt;」「&gt;」などエスケープ文字をそのまま使いたい場合には<pre>・・・</pre>タグのまま、エスケープして欲しい箇所だけ、

<span class="html">
</span>

で囲う。 ここまでくると、行:Markについてはもはや連動解決。

単独指定で
<span class="mark">とするもよし、複数指定で

<span class="mark html">としても可

 

こう説明すると長〜いけど、spanだcodeだと普段html書き慣れてる者にとっては、プラグインの別窓エディタ開かず、WPのダッシュボードかMarkdownエディタのみで完結しちゃうのがかなり楽!

Atomちゃんの「Markdown Preview」優秀ですからねー。 他のエディタを使っている方には、Simplenoteオンライン版も書きやすいし、Dropboxもたまに.mdファイル使います。

何にせよ、最初の(タグ・エスケープは面倒すぎる)が 「preタグ内にHTMLを入れてJavaScriptでエスケープすると便利」ー記事のおかげで解消しちゃったので、気ままに「highlight.js」を導入することができました。感謝!