\最短10分でWordPressブログを作る!/

【Cocoon】クラシックエディタで超簡単にコードをハイライトさせる方法

WordPress

CSSを調べていると、記事内にコードをこんな感じで張り付けている記事をよく見ませんか?

body{
background:red
}

これ、ソースコードのハイライト表示といって、プラグインやCSSでできるのですが、Cocoonだとデフォルトで備わってるとのこと。

ですが、エディタの”コード”をつかってもそれらしい表示にはなりませんでした。

なので、調べてみましたが、出てくるのはブロックエディタでのハイライト表示ばかり。

私はクラシックエディタを使っていて、どうしてもブロックエディタを使いたくなったので、あきらめずに根気よく探したところ、ついに見つけました。

超簡単でしたので残しておきます。

 

クラシックエディタでコードをハイライト表示するには

エディタにある「<>」このマーク。コードではあるのですが、ハイライト表示ではありません。

ハイライト表示するにはpreタグを使わないといけないみたいです。

毎回preタグで挟むのは面倒なので、調べてみたところ、少し時間がかかりましたが方法が見つかりました。

まず、「Cocoon設定」の「コード」から「ハイライト表示」のチェックボックスにチェックをいれます。

そのほかの設定はデフォルトでもOKです。

あとは記事の編集画面で

「段落」から「成形済みテキスト」を選ぶだけで、こんな感じでpreタグが挿入されます。

ここにハイライト表示したいコードを書けば、完了!

body{
background:blue
}

以上、超簡単なクラシックエディタでのハイライト表示でした。

タイトルとURLをコピーしました