失敗談:WordPressにhighlight.jsを導入するときにハイライトされない

この記事では「私のこのブログにhighlight.jsを導入するときにハマった」のでこれから導入する人に向けて参考となればという内容になっています。

実のところ以前にも一度チャレンジしたのですが、今仕事でWordPressやphpを触っているくせに当時の消防士時代の自分は最後までやりませんでした笑

 

結局、当時と同じところでハマった訳ですが、今回はこれから「javascript」の復習記事を書きたいと思い、最後まで粘った次第です。

 

【失敗談】WordPressにhighlight.jsを導入するときにハマった

先日のツイート

この通り1時間ほど結局かかってしまいました。

導入に関しては下記記事で間違いないです。

SANGOにhighlight.jsを導入してシンタックスハイライトをかっこよくしてみた

ちなみに当サイトもテーマはsangoを使っています。

 

結論、どこにつまづいたか?というと

・highlight.js導入したのにハイライトされない

・エディターでどのコード書いていいか分からない

上記2つです。

 

おそらくどのテーマも導入手順は同じです(ちゃんと調べてからやってくださいね)。

子テーマ入れる→functions.phpとcssを追加する→エディターでハイライト

(※テーマの編集は必ず自己責任でお願いします。責任は負いません)

ざっくりこの手順だと思います。

 

他の記事でも導入については書いてあるのでここでは割愛します。先ほどの記事が参考になります。

SANGOにhighlight.jsを導入してシンタックスハイライトをかっこよくしてみた

 

では自分がつまづいた2つを解説していきます。

 

highlight.js導入したのにハイライトされない

先ほどの記事の通り導入が簡単に終わりました。

まず始めに下記のコードにテキストの方に直書きしてみる。

   <nav>
     <ul>
      <li><a href="#">HOME</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">contact</a></li>
      <li><a class="phone">090-0123-4567</a></li>
     </ul>
   </nav>

そりゃそうです、テキストの方で読み込んでねって言っているので。

これは無論なんですが、記憶では何かしらのセレクターかショートコードで囲ってあげたよなと思い調べる‥

 

はいさすがGoogle先生、すぐに答えが出てきますね。

<pre><code></code></pre>

囲えばいいとのこと。

ん?いや違う違うそうじゃない、コードが載って欲しいのよ。

でも確かにテキストの方にコードを打ち込めば、そりゃ<ul><li></li></ul><li></li>使ってるんだからリストになるよね。

 

って思って調べて試して調べて試してっていうのが続きました。

ここでは解決せず、そもそも投稿のエディターで書くものなの?って思ってきて別の調べ方をし始めました。

 

エディターでどのコード書いていいか分からない

ビジュアルエディターで書いても、テキストエディターで書いてもハイライトされるかされないかだけでコードは乗りません。

結局のところ、みなさんは気づいているとは思いますが、エスケープされていないんですよね。

 

phpとか全く知らんって人に向けて説明するなれば、

「投稿でコードを打てばそのコードは反映されるようになっているから、そのコードを反映させないただの文字として認識させるためにエスケープ(逃す)必要がある」

ということ。

 

詳しく知りたい人は下記記事がめっちゃわかりやすかったので、じっくり読んでください。

参考 【初心者向け】HTMLを使ったエスケープ処理について詳しく解説!codecamp

 

ついでにHTMLをエスケープさせるサイトもあったのでこちらでも試してみてください。

こっちでエスケープさせて貼り付けてもできました。ただ改行がうざいですが。

https://tech-unlimited.com/escape.html

 

やったーできたーって思ったけどなんか変。急に今度は文字の色が変わらなくなりました。

ここにきて45分ほど使っています。

 

はぁと諦めかけましたが、この記事で全て解決しました。

参考 『LION MEDIA』<pre><code>要素にhighlight.jsを使いハイライトなアイコン付きソース表示カスタマイズLION MEDIA

いや〜この記事にもっと早く会いたかった。

 

結果的に、自分の<pre><code></code></pre>のclassの付け方が違ったみたいです。

これまでclass=”html”とかしていましたが違うみたいです。

HTMLなら【class=”content pre code_html”】

CSSなら【class=”content pre code_css”】

JSなら【class=”content pre code_js”】

PHPなら【class=”content pre code_php”】

上記をクラスにつけてください。

 

もし他にもやり方あるという方は教えてください。

 

highlight.jsをいちいちエスケープさせないために

highlight.jsをいちいちエスケープさせないために

<pre><code></code></pre>を打つのがめんどくさいので、Add Qick Tagでタグを作成しました。

あとはエスケープがめんどうだなと思いショートコード を作成しました。

 

方法は簡単です子テーマのfunctions.phpに以下を追加するだけです。


function sc_html_escape( $arg, $code="" ) {
    return htmlspecialchars($code, ENT_QUOTES, 'UTF-8', false);
}
add_shortcode('html_escape', 'sc_html_escape');

 

これで[html_escape][/html_escape]の中に打ち込んだコードはエスケープされます。

このショートコードもAdd Qick Tagの中に入れ込んだら完了です。

 

クラシックエディターを使っている人は注意

自分はブログだけはクラシックエディターを使っているのですが、コードを書き込む際は必ず[html_escape][/html_escape]の中に打ち込むこと。

そうしないとなんかめっちゃ崩れます。

エスケープさせなかった分そうなるということであってるかな?

 

失敗談:highlight.jsを導入したらハマったのまとめ

参考 『LION MEDIA』<pre><code>要素にhighlight.jsを使いハイライトなアイコン付きソース表示カスタマイズLION MEDIA

この記事で全てが解決しました。

 

ほかの先駆者の方もありがとうございました。

 

あなたにオススメの記事

ロリポップでWordPressを上書きしてサイトが飛んだときの対応

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です