WordPressでソースコードを見やすく・簡単に表示するプラグイン!

  • URLをコピーしました!

ブログにソースコードを掲載するときに、読者の方へ

 ・ソースコードをお手軽にコピーしてもらいたい。
 ・ソースコードを装飾して、綺麗な色で見てもらいたい。
 ・ソースコードの解説をするために行数を表示させたい。

って思うことありませんか。

そこでおすすめなのが、「Highlighting Code Block」というプラグインです。

このプライグインを使うと、ソースコードをきれいに装飾して表示くれますので
画面上でソースコードが非常に見やすくなります。

この記事では「Highlighting Code Block」というプラグインをご紹介します。

目次

プラグインをインストールする

WordPressのダッシュボードのメニュから、[プラグイン]⇒[新規追加]を選択します。
そして、キーワード検索欄に、「Highlighting Code Block」と入力して検索します。

作成者は、ワードプレステーマのSWELLの開発者であるLOOS, Inc.さんです!
下記のプラグインが表示されたら、「今すぐインストール」ボタンをクリックしインストールします。
インストールが完了したら、プラグインを「有効」に設定します。

プラグイン「Highlighing Code Block」を検索する

プラグイン「Highlighing Code Block」の使い方

WordPressの投稿画面でブロックを追加する際、検索で「H]と入力すると、
「Higllighting Code Block」が表示されますので、選択します。

ブロックを追加する際の説明


すると、ソースコードを入力するブロックが表示されます。

Highlighing Code Blockの使用方法の説明

使い方は簡単!表示されたブロックに、直接ソースコードを記述するだけなんです。

あと、画面の下から次の指定が可能です。
 ・プルダウンで、ソースコードの種類が選択できます。
 ・ファイル名を入力すると右上にファイル名が表示されます。

超簡単ですね!
試しに、簡単なHTMLのコードを書いてみます。
6行目をハイライトしてみたいと思います。

Highlighing Code Blockの使用方法の説明2


実際に、プレビューで記事を見ると次のように表示されます。
ソースコードの行数が表示され、綺麗に装飾されていますね。
画面右上のボタンを押すと、ソースコードをコピーすることができます。
読者にとって、とても便利でやさしい機能ですね。

「Highlighing Code Block」のプレビュー画面

プラグイン「Highlighing Code Block」の基本設定

 当プラグインの基本設定は次のメニュから設定可能です。
 ※ダッシュボードから、「設定」 ⇒ [HCB設定] を選択

「Highlighing Code Block」の基本設定・その1

 次の画面でHighlighing Code Blockの基本設定ができますので、
 カラーリングなどはお好みにより設定してみてください。

「Highlighing Code Block」の基本設定・その2

まとめ

ソースコードを簡単にシンタックスハイライトできるプラグインである
Highlighting Code Blockを紹介しました。

プラグインを有効化して、画面の背景色をお好みに設定するだけで、
とてもお手軽に使うことができます。

読者にとってもソースコードがとても読みやすくなりますので、
ブログにソースコードを載せようとしている方には、是非オススメです。

最後までお読みいただきありがとうございました。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次