highlight.jsで半角スペースが で記述されている場合に自動的に半角スペースへ置換させる

Are you want to translate this page to English? Please click this link to translate via ‘©Google Translate'!

この記事内のコンテンツはCC BY-SA 4.0（表示・継承・商用利用可）にて提供されています。ソースコード等の利用やブログへの掲載はライセンスに同意の上お願いします。

みなさんこんにちは、ガノー（Twitter:Ganohr）です。

当サイトでは『highlight.js』を活用してコードを共有しています。

【ワードプレス】highlight.jsを用い自動でシンタックスハイライトを行う方法【プラグイン不要・AMP考慮】　ガノー（Ganohr）です!　(≧▽≦)当サイトはワードプレスのカスタマイズからC#のソースコードはたまたHTMLやCSSまで様々な題材を扱っています.そのような時に便利なのがシンタックスハイライトです.当サイトが利用しているワードプレステーマのLIONMEDIAにはシンタックスハイライト機能がないため代替手段が必要です.そこで当サイトでは導入も利用も簡単な『highlight.js』を用いることとしました.またシンタックスハイライトが必要な記事に自動で適用させることにしま ... 続きを読むganohr.net2019-12-03

highlight.jsは便利なのですが、ソースコードを掲示する際に、色々な制約がありました。

その一つに、以前のver 11.7.0未満では、掲示するコードの半角スペースを予め「 」で置換しないと正しく処理されないという不具合があったのです。

しかし最近の11.7.0以降より、むしろ「 」として置換して掲示したコードをテキスト選択によってコピーすると、「0xc2 + 0xa0」（特殊半角スペース「 」）に置換されてしまうようになりました。これ以前のバージョンであれば「 」として掲示していたコードをテキスト選択してコピーしても「0x20」（半角スペース「 」）として表示されていたため、テキスト選択によってコピーしても問題ありませんでした。

そして、当サイトはまとまったコードブロックに関しては、自動的に「COPY CODE」というボタンが自動的に表示されるように構築しており、このボタンを利用すればバージョン差異なく、問題のないコードがコピーできます。

しかし、当サイトの利用者の多くが「COPY CODE」ボタンを活用していないことが分かっています。

サンプルコード全体ではなく、一部分のみをコピーしたいと思う方が多いのです。

そうなってくると「直接コピーしたコードが特殊半角スペースになっているのは大問題」です。

そこでこの記事では、

を紹介します。

highlight.jsで「 」を自動的に半角スペースへ置換するコード

<script>
/*! Copyright ganohr.net, Licensed for CC by SA 4.0 */
let hljs_nbsp_replaced = false;
hljs.addPlugin({'after:highlightElement':(el, res)=>{
    if (hljs_nbsp_replaced) {
        return;
    }
    hljs_nbsp_replaced = true;
    setTimeout(
        () => document.querySelectorAll('pre>code>*').forEach(
            e => e.innerHTML = e.innerHTML.replace(/&nbsp;/g, ' ')
        ), 1
    );
}});
</script>

WordPressで自動的にhighlight.jsを呼び出す場合

以下の記事で公開したコードを修正します。

【ワードプレス】highlight.jsを用い自動でシンタックスハイライトを行う方法【プラグイン不要・AMP考慮】　ガノー（Ganohr）です!　(≧▽≦)当サイトはワードプレスのカスタマイズからC#のソースコードはたまたHTMLやCSSまで様々な題材を扱っています.そのような時に便利なのがシンタックスハイライトです.当サイトが利用しているワードプレステーマのLIONMEDIAにはシンタックスハイライト機能がないため代替手段が必要です.そこで当サイトでは導入も利用も簡単な『highlight.js』を用いることとしました.またシンタックスハイライトが必要な記事に自動で適用させることにしま ... 続きを読むganohr.net2019-12-03

※ このコードの使い方等は上記の記事でご確認ください。

/*! Copyright ganohr.net, Licensed for CC by SA 4.0 */
function append_if_need_highlight_js($content) {
    if(gnr_is_amp()) {
        return $content;
    }
    $highlight_js = '<link rel="stylesheet"'
        . ' href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-light.min.css">'
        . '<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>'
        . '<script>hljs.initHighlightingOnLoad();</script>'
        . <<<EOF
<script>/*!Copyright ganohr.net, Licensed for CC by SA 4.0*/
let hljs_nbsp_replaced=false;hljs.addPlugin({'after:highlightElement':(el,res)=>{if(hljs_nbsp_replaced)return;hljs_nbsp_replaced=true;setTimeout(()=>document.querySelectorAll('pre>code>*').forEach(e=>e.innerHTML=e.innerHTML.replace(/&nbsp;/g,' ')),1);}});
</script>
EOF;
    if(preg_match('/' .preg_quote($highlight_js, '/') .'/', $content)) {
        return $content;
    }
    if(preg_match('/<\\/code><\\/pre>/', $content)) {
        $content = $content . "\n\n" . $highlight_js;
    }
    return $content;
}
add_filter( 'the_content', 'append_if_need_highlight_js', 1);

関連記事

【ワードプレス】highlight.jsを用い自動でシンタックスハイライトを行う方法【プラグイン不要・AMP考慮】　ガノー（Ganohr）です!　(≧▽≦)当サイトはワードプレスのカスタマイズからC#のソースコードはたまたHTMLやCSSまで様々な題材を扱っています.そのような時に便利なのがシンタックスハイライトです.当サイトが利用しているワードプレステーマのLIONMEDIAにはシンタックスハイライト機能がないため代替手段が必要です.そこで当サイトでは導入も利用も簡単な『highlight.js』を用いることとしました.またシンタックスハイライトが必要な記事に自動で適用させることにしま ... 続きを読むganohr.net2019-12-03