WordPress設定

CodeMirror Blocks コードを見やすく表示するプラグイン 設定方法と使い方読み終わるまで 4

CodeMirror Blocks コードを見やすく表示するプラグイン 設定方法と使い方 アイキャッチ

ワードプレス(WordPress)の投稿ページ等にHTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきるプラグイン CodeMirror Blocks を解説します。

この記事を見ることで得られるメリット
  • CodeMirror Blocks の使い方と詳細な設定方法がわかります

CodeMirror Blocks で実現できること

CodeMirror Blocks プラグインを入れるとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示することができます。

  • HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
CodeMirror Blocksプラグインを使って表示させたHTMLコードCodeMirror Blocksプラグインを使って表示させたHTMLコード

↑CodeMirror Blocksプラグインを実際に利用して表示させています。

CodeMirror Blocks のインストール方法

CodeMirror Blocks プラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”CodeMirror Blocks ”と入力すると下に検索結果が表示されます
  4. ”CodeMirror Blocks ”の「今すぐインストール」ボタンをクリックします
“CodeMirror Blocks ”のインストール完了画面“CodeMirror Blocks ”のインストール完了画面

↑CodeMirror Blocks のインストールが完了すると有効化ボタンが表示されるのでクリックします。

"CodeMirror Blocks "を有効化すると表示される画面“CodeMirror Blocks “を有効化すると表示される画面

これでCodeMirror Blocks のインストールと有効化は完了です。

CodeMirror Blocks の設定と使い方

CodeMirror Blocksの設定画面はダッシュボード(管理画面)にある「Enlighter」です。

WordPressのダッシュボード(管理画面)WordPressのダッシュボード(管理画面)

↑CodeMirror Blocksの設定画面はWoredPressのダッシュボード(管理者画面)の「CodeMirror Blocks」をクリックします。

CodeMirror Blocks の設定

CodeMirror Blocksの設定画面は英語になっています。

設定できる箇所は多いですがテーマや行の変更ぐらいしか変更する必要はありません。

設定は1画面で、エディターのデフォルト設定とコントロールパネルの2つの大項目があります。

CodeMirror Blocksの設定画面CodeMirror Blocksの設定画面
エディターのデフォルト設定項目
設定項目名意味
Language/Mode(言語/モード)プログラム言語等の種類を指定。初期設定はHTML
Theme(テーマ)テーマ(デザイン)を指定。初期設定はMaterial
Show Line Number?(行番号を表示しますか?)行番号を表示するかを否か。初期設定はNo
Highlight Active Line?(アクティブラインを強調表示しますか?)マウスカーソルの行をハイライト表示するか否か。初期設定はNo
Wrap Long Line?(長蛇の列を包む?)右端で折り返すか否か。初期設定はNo
Editable on Frontend?(フロントエンドで編集可能ですか?)投稿記事で入力可能にするか否か。初期設定はNo
コントロールパネル設定項目
設定項目名意味
Enable Control Panel?(コントロールパネルを有効にしますか?)コードブロックの上にコントロールパネルを表示するか否か。初期設定はYes
Language Label(言語ラベル)コントロールパネルに言語ラベルを表示するか否か。初期設定は言語名
Enable Execute Button?(実行ボタンを有効にしますか?)コントロールパネルに実行ボタンを表示するかを否か。初期設定はYes
Enable Full Screen Button?(フルスクリーンボタンを有効にしますか?)コントロールパネルに拡大画面ボタンを表示するか否か。初期設定はYes
Enable Copy Button?(コピーボタンを有効にしますか?)コントロールパネルにコピーボタンを表示するか否か。初期設定はYes
Enable Code Block on Home Page?(ホームページでコードブロックを有効にしますか?)コードブロックを読み込むか否か。初期設定はNo

CodeMirror Blocksの設定は好みのテーマに変更する以外は、とくに変更する箇所はありません。初期設定の状態のままで大丈夫です

おすすめの設定

CodeMirror Blocksのおすすめのテーマ設定を紹介します。

テーマ

  • オススメは背景が黒のテーマです。完全にモノクロのテーマはないので、完全に好みになりますが。なかでもBlackboardとCobaltは視認性が良いのでおすすめです。

次項で全58種類あるテーマの画面をすべて載せているので参考にしてください。

なお、テーマ以外の設定項目は初期設定の状態がおすすめです。

テーマ毎のデザインの違い

CodeMirror Blocksには数多くのテーマを選択できます。
全テーマ58種類の画像を載せています。
テーマによって行間のサイズやボックスの四隅が角丸といった違いがあります。

Codemirror Default

CodeMirror Blocksのテーマ:「Codemirror Default」CodeMirror Blocksのテーマ:「Codemirror Default」

3024-day

CodeMirror Blocksのテーマ:「3024-day」CodeMirror Blocksのテーマ:「3024-day」

3024-night

CodeMirror Blocksのテーマ:「3024-night」CodeMirror Blocksのテーマ:「3024-night」

Abcdef

CodeMirror Blocksのテーマ:「Abcdef」CodeMirror Blocksのテーマ:「Abcdef」

Ambiance

CodeMirror Blocksのテーマ:「Ambiance」CodeMirror Blocksのテーマ:「Ambiance」

Base16-dark

CodeMirror Blocksのテーマ:「Base16-dark」CodeMirror Blocksのテーマ:「Base16-dark」

Base16-light

CodeMirror Blocksのテーマ:「Base16-light」CodeMirror Blocksのテーマ:「Base16-light」

Bespin

CodeMirror Blocksのテーマ:「Bespin」CodeMirror Blocksのテーマ:「Bespin」

Blackboard

CodeMirror Blocksのテーマ:「Blackboard」CodeMirror Blocksのテーマ:「Blackboard」

Cobalt

CodeMirror Blocksのテーマ:「Cobalt」CodeMirror Blocksのテーマ:「Cobalt」

Colorforth

CodeMirror Blocksのテーマ:「Colorforth」CodeMirror Blocksのテーマ:「Colorforth」

Darcula

CodeMirror Blocksのテーマ:「Darcula」CodeMirror Blocksのテーマ:「Darcula」

Dracula

CodeMirror Blocksのテーマ:「Dracula」CodeMirror Blocksのテーマ:「Dracula」

Duotone-dark

CodeMirror Blocksのテーマ:「Duotone-dark」CodeMirror Blocksのテーマ:「Duotone-dark」

Duotone-light

CodeMirror Blocksのテーマ:「Duotone-light」CodeMirror Blocksのテーマ:「Duotone-light」

Elegant

CodeMirror Blocksのテーマ:「Elegant」CodeMirror Blocksのテーマ:「Elegant」

Erlang-dark

CodeMirror Blocksのテーマ:「Erlang-dark」CodeMirror Blocksのテーマ:「Erlang-dark」

Gruvbox-dark

CodeMirror Blocksのテーマ:「Gruvbox-dark」CodeMirror Blocksのテーマ:「Gruvbox-dark」

Hopscotch

CodeMirror Blocksのテーマ:「Hopscotch」CodeMirror Blocksのテーマ:「Hopscotch」

Icecoder

CodeMirror Blocksのテーマ:「Icecoder」CodeMirror Blocksのテーマ:「Icecoder」

Idea

CodeMirror Blocksのテーマ:「Idea」CodeMirror Blocksのテーマ:「Idea」

Isotope

CodeMirror Blocksのテーマ:「Isotope」CodeMirror Blocksのテーマ:「Isotope」

Lesser-dark

CodeMirror Blocksのテーマ:「Lesser-dark」CodeMirror Blocksのテーマ:「Lesser-dark」

Liquibyte

CodeMirror Blocksのテーマ:「Liquibyte」CodeMirror Blocksのテーマ:「Liquibyte」

Lucario

CodeMirror Blocksのテーマ:「Lucario」CodeMirror Blocksのテーマ:「Lucario」

Material

CodeMirror Blocksのテーマ:「Material」CodeMirror Blocksのテーマ:「Material」

Mbo

CodeMirror Blocksのテーマ:「Mbo」CodeMirror Blocksのテーマ:「Mbo」

Mdn-like

CodeMirror Blocksのテーマ:「Mdn-like」CodeMirror Blocksのテーマ:「Mdn-like」

Midnight

CodeMirror Blocksのテーマ:「Midnight」CodeMirror Blocksのテーマ:「Midnight」

Monokai

CodeMirror Blocksのテーマ:「Monokai」CodeMirror Blocksのテーマ:「Monokai」

Neat

CodeMirror Blocksのテーマ:「Neat」CodeMirror Blocksのテーマ:「Neat」

Neo

CodeMirror Blocksのテーマ:「Neo」CodeMirror Blocksのテーマ:「Neo」

Night

CodeMirror Blocksのテーマ:「Night」CodeMirror Blocksのテーマ:「Night」

Oceanic-next

CodeMirror Blocksのテーマ:「Oceanic-next」CodeMirror Blocksのテーマ:「Oceanic-next」

Panda-syntax

CodeMirror Blocksのテーマ:「Panda-syntax」CodeMirror Blocksのテーマ:「Panda-syntax」

Paraiso-dark

CodeMirror Blocksのテーマ:「Paraiso-dark」CodeMirror Blocksのテーマ:「Paraiso-dark」

Paraiso-light

CodeMirror Blocksのテーマ:「Paraiso-light」CodeMirror Blocksのテーマ:「Paraiso-light」

Pastel-on-dark

CodeMirror Blocksのテーマ:「Pastel-on-dark」CodeMirror Blocksのテーマ:「Pastel-on-dark」

Railscasts

CodeMirror Blocksのテーマ:「Railscasts」CodeMirror Blocksのテーマ:「Railscasts」

Reactjs.org Doc Theme

CodeMirror Blocksのテーマ:「Reactjs.org Doc Theme」CodeMirror Blocksのテーマ:「Reactjs.org Doc Theme」

Rubyblue

CodeMirror Blocksのテーマ:「Rubyblue」CodeMirror Blocksのテーマ:「Rubyblue」

Seti

CodeMirror Blocksのテーマ:「Seti」CodeMirror Blocksのテーマ:「Seti」

Shadowfox

CodeMirror Blocksのテーマ:「Shadowfox」CodeMirror Blocksのテーマ:「Shadowfox」

Solarized

CodeMirror Blocksのテーマ:「Solarized」CodeMirror Blocksのテーマ:「Solarized」

The-matrix

CodeMirror Blocksのテーマ:「The-matrix」CodeMirror Blocksのテーマ:「The-matrix」

Tomorrow-night-bright

CodeMirror Blocksのテーマ:「Tomorrow-night-bright」CodeMirror Blocksのテーマ:「Tomorrow-night-bright」

Tomorrow-night-eighties

CodeMirror Blocksのテーマ:「Tomorrow-night-eighties」CodeMirror Blocksのテーマ:「Tomorrow-night-eighties」

Ttcn

CodeMirror Blocksのテーマ:「Ttcn」CodeMirror Blocksのテーマ:「Ttcn」

Twilight

CodeMirror Blocksのテーマ:「Twilight」CodeMirror Blocksのテーマ:「Twilight」

Vibrant-ink

CodeMirror Blocksのテーマ:「Vibrant-ink」CodeMirror Blocksのテーマ:「Vibrant-ink」

Xq-dark

CodeMirror Blocksのテーマ:「Xq-dark」CodeMirror Blocksのテーマ:「Xq-dark」

Xq-light

CodeMirror Blocksのテーマ:「Xq-light」CodeMirror Blocksのテーマ:「Xq-light」

Yeti

CodeMirror Blocksのテーマ:「Yeti」CodeMirror Blocksのテーマ:「Yeti」

Zenburn

CodeMirror Blocksのテーマ:「Zenburn」CodeMirror Blocksのテーマ:「Zenburn」

Enlighter – Customizable Syntax Highlighteの使い方

CodeMirror Blocksを使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。

投稿を編集画面投稿を編集画面

↑投稿記事の編集画面でコードテキストを入力したい箇所でツールバー内のあるCodeMirror Blockボタンをクリックします。

CodeMirror Blocksのコード入力画面CodeMirror Blocksのコード入力画面

↑CodeMirror Blocksのコード入力画面が表示されるのでテキストボックスにコードテキストを入力し、最後にOKボタンをクリックします。

プログラム言語が不明な場合は初期設定のままで大丈夫です。

設定画面と同じ下記の項目を個別に設定することも出来ます。
全体設定よりも個別設定の方が優先されます

  • Language/Mode:プログラム言語を指定
  • Theme:見た目のデザインを指定
  • Show Line Numbers?:行番号を表示するかしないか
  • Highlight Active Line?:アクティブになっている行をハイライト表示するかしないか
  • Warp Long Line?:長い行を右端で折り返すか否か
  • on Frontend?:コードブロックを普通 or 編集可能 or コピーを無効にする
  • 配置:普通 or 幅広 or 全幅
CodeMirror Blocksを使ってHTMLコードを入力した画面CodeMirror Blocksを使ってHTMLコードを入力した画面

↑CodeMirror Blocksを使ってHTMLコードを入力するとこのようにビジュアルエディタで表示されます。

短いショートコードやCSSのコードもまったく同様の手順でOKです。

右端の歯車のマークを押すと個別設定画面が表示されます。内容は前述した項目と同じです

次は記事をプレビューして先ほど入力したHTMLコードを表示してみます。

表示を確認

CodeMirror Blocksを使って入力したHTMLコードCodeMirror Blocksを使って入力したHTMLコード

↑PC画面ではこのように表示されます。

まとめ

CodeMirror Blocksを利用するとHTMLやCSSのコード、他のプログラム言語のコードを記事に貼り付けて紹介や解説するときに、メリハリを付けて視認性を向上して見やすく表示させることができます。

プラグインのショートコードを投稿ページ本文に貼り付けて紹介や解説する時に自動変換されないのでとくに重宝します。

設定箇所も多くなく、好みのデザインのテーマに変更するだけで、あとは初期設定ままで利用することが可能です。

コードを見やすくするプラグイン中でもシンプルなので気軽に利用することができます。

難点は設定画面が日本語になっていない点と、モノクロのテーマが無い事です。

もしシンプルな白黒のデザインが良い場合は他のコードを見やすく表示するプラグインを使った方が良いかも知れません。おすすめは「Urvanov Syntax Highlighter」です。

もっと多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓