【初老ハマる】ストークでのコードハイライト表示

初老ですが、一応、コードも書くので、それをネタにする事もあるかと思い、ストークでコードのハイライト表示を試してみました。。。。が。。。。
見事にハマったので、ご紹介します。

ショートコードの例をハイライト表示する時のハマり

ワードプレスの次期標準テキストエディタの「Gurtenberg」の記事を書いている時に、

【初老が恋する！】Gutenbergが便利だと思ったコト

2018年12月28日

再利用ブロックの説明で、ショートコードの例をハイライト表示しようしたのですが、上手く出来ませんでした。

ハマった手順

ショートコードの「関連記事」の例をハイライト表示しようと思い、Gurtenbergのコードブロックを配置しました。

ハイライト表示したい、関連記事のショートコードを記述しました。

プレビューしてみると、ハイライト表示にならず、ショートコードが処理された結果が表示されています。(・・;)

おまけに上と下に、変なのが表示されてます。

ググって解決策を見つけた

意味不明な状態に陥り、途方に暮れていましたが、ググると解決策が見つかりました。

解決方法は、ハイライト表示用のプラグインを導入する事でした。

何が良いのか分からなかったのですが、「軽量」という事だったので、「
WP Code Highlight.js 」を使うことにしました。

WP Code Highlight.js の設定

「WP Code Highlight.js」 の設定画面で

設定を下記の通りに行いました。

再チャンレジ

先程と同じようにコードブロックを用意して、関連記事のショートコードを書いて、プレビューしてみました！

さっきと表示が若干変わりましたが、コードのハイライト表示にはなりませんでした。(・・;)
結局、コードブロックではなくて、ショートコードブロックを使い下記の様に書きました。

そして、プレビューしてみると！

やっと、ハイライト表示になりました！が。。。。なんか、まんじゅうの断面図みたいに２層になっています。

まんじゅう構造をなんとかする

「まんじゅう構造」と命名したこの２層構造を１層にしたいので、子テーマに以下のCSSを追加しました。因みに、 「WP Code Highlight.js」 のColor Schemeを「Rainbow」以外に設定した場合は、設定した色設定を行って下さい。

.entry-content pre {
background: #474949;
}

恐る恐るプレビューしてみると！
まんじゅう構造が解消していました！＼(^o^)／

[kanren postid="759"]

結構ハマったので、他にもハマっている人がいたら参考になれば幸いです。

追記

ショートコードを含まないコードをハイライト表示する場合は、コードブロックを利用すると良いです。