【WordPress】きれいにソースコードを表示「Highlighting Code Block」

ブログ
スポンサーリンク

こんにちは、サブです。

ブログ系の記事を書いていく中で、CSSなどのソースコードを記事に載せたいことが増えてきました。

これまでは、下記のようなソースコードの表示になっていました。

全然いけてないです。

読みやすいブログ記事では、もっと「おしゃれ」に「きれい」に、ソースコードを表示しています。

今回は、WordPressでソースコードをきれいに表示するためのプラグイン「Highlighting Code Block」について、使い方をまとめていこうと思います。

僕と同じように、ブログ記事上にソースコードをもっときれいに表示したい、と考えている方の参考になればうれしいです。

スポンサーリンク

Highlighting Code Blockとは

「Highlighting Code Block」は、ブログ記事でソースコードをきれいに表示できて、簡単に操作ができる、WordPressプラグインです。

HTML/CSSだけでなく、PHPやJavaScriptなど、とても多くのプログラミング言語に対応しています。

それぞれのプログラミング言語に適した形で、文字の色分けがされます。

スポンサーリンク

Highlighting Code Blockのインストール

まずは、 「Highlighting Code Block」 をWordPressにインストールしましょう。

WordPress管理画面の「ダッシュボード」>「プラグイン」>「新規追加」と進みます。

プラグインの検索で「Highlighting Code Block」と入力して、検索します。

「Highlighting Code Block」と表示されたプラグインが出てきますので、「今すぐインストール」>「有効化」と進みます。

以上でインストールが完了です。

Highlighting Code Blockの使い方

特に難しい設定はいりません。

インストールが終われば、記事を書くときにすぐ使える状態になっています。

記事編集画面で「+」を押してブロック選択に進み、「フォーマット」を選びます。

「フォーマット」の中にある「Highlighting Code Block」を選びます。

ソースコードを入力するためのボックスが表示されます。

冒頭で例にあげたCSSコードを入力してみます。

一度「プレビュー」で、どう表示されるか確認します。

figure.solid img {
	border: solid 2px #c7c7c7;
}

非常にいい感じです。

やはり、表示がきれいになると嬉しいですね。

コメント

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