プラグイン不要！ワードプレステーマ、ゴールドブログのソースコードハイライトの使い方を解説

関連記事

読み込み中... 読み込み中...

ゴールドブログでソースコードハイライトを表示する方法

やり方は簡単です。

STEP1

テーマ設定で「HTML圧縮」を解除する

上記の画像を参考にワードプレス管理画面から「テーマ設定」＞「高速化設定」をクリックすると「HTML圧縮」という項目があるので、これをオフに設定します。これをしないとハイライト機能が正常に作動せず、ソースコードが１行にまとめられたりします。

アフィンガーやSANGO、SWELL、ストーク１９あたりに高速化機能があったと思うので、有料ワードプレステーマを使ってる方で、ワードプレス上でソースコードハイライト上手く表示されないと困ってる人も「HTML圧縮」のチェックを外してみてください。上手くいくテーマもあるんじゃないかと思ってメモ書きしてます。

STEP2

投稿画面のブロックエディタで「ソース」を選択し、コピペして貼り付けるだけ

<div class="box6">
<ul>
 	<li></li>
 	<li></li>
</ul>
</div>

こんな感じでソースコードをハイライトできます。

プラグインなしでできますが、コピーボタンが存在しないので、コピーボタンを搭載したい人はプラグインの「Highlighting Code Block」(WordPressテーマ「SWELL」販売してる会社のプラグイン）をインストールし、簡単にコピペボタンを設置したり、背景を黒に変更したりできるので、こちらもおすすめです。

ただ、プラグイン入れると動作が遅くなるので、個人的にはソースコードハイライトが標準装備されてるワードプレステーマを使うようにしています。

無料だとコクーンやSimplicityで簡単にソースコードハイライトできるので、こういったテーマを使って表示速度の高速化をするのも１つの方法です。

プラグインが多すぎるとセキュリティで脆弱性が増したりするので、なるべく少なくしたほうが管理もラクです。