ワードプレス(WordPress)の投稿ページ等にHTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきるプラグイン CodeMirror Blocks を解説します。
- CodeMirror Blocks の使い方と詳細な設定方法がわかります
- CodeMirror Blocks で実現できること
- CodeMirror Blocks のインストール方法
- CodeMirror Blocks の設定と使い方
- CodeMirror Blocks の設定
- おすすめの設定
- テーマ毎のデザインの違い
- Codemirror Default
- 3024-day
- 3024-night
- Abcdef
- Ambiance
- Base16-dark
- Base16-light
- Bespin
- Blackboard
- Cobalt
- Colorforth
- Darcula
- Dracula
- Duotone-dark
- Duotone-light
- Elegant
- Erlang-dark
- Gruvbox-dark
- Hopscotch
- Icecoder
- Idea
- Isotope
- Lesser-dark
- Liquibyte
- Lucario
- Material
- Mbo
- Mdn-like
- Midnight
- Monokai
- Neat
- Neo
- Night
- Oceanic-next
- Panda-syntax
- Paraiso-dark
- Paraiso-light
- Pastel-on-dark
- Railscasts
- Reactjs.org Doc Theme
- Rubyblue
- Seti
- Shadowfox
- Solarized
- The-matrix
- Tomorrow-night-bright
- Tomorrow-night-eighties
- Ttcn
- Twilight
- Vibrant-ink
- Xq-dark
- Xq-light
- Yeti
- Zenburn
- Enlighter – Customizable Syntax Highlighteの使い方
- まとめ
CodeMirror Blocks で実現できること
CodeMirror Blocks プラグインを入れるとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示することができます。
- HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
CodeMirror Blocksプラグインを使って表示させたHTMLコード↑CodeMirror Blocksプラグインを実際に利用して表示させています。
CodeMirror Blocks のインストール方法
CodeMirror Blocks プラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”CodeMirror Blocks ”と入力すると下に検索結果が表示されます
- ”CodeMirror Blocks ”の「今すぐインストール」ボタンをクリックします
“CodeMirror Blocks ”のインストール完了画面↑CodeMirror Blocks のインストールが完了すると有効化ボタンが表示されるのでクリックします。
“CodeMirror Blocks “を有効化すると表示される画面これでCodeMirror Blocks のインストールと有効化は完了です。
CodeMirror Blocks の設定と使い方
CodeMirror Blocksの設定画面はダッシュボード(管理画面)にある「Enlighter」です。
WordPressのダッシュボード(管理画面)↑CodeMirror Blocksの設定画面はWoredPressのダッシュボード(管理者画面)の「CodeMirror Blocks」をクリックします。
CodeMirror Blocks の設定
CodeMirror Blocksの設定画面は英語になっています。
設定できる箇所は多いですがテーマや行の変更ぐらいしか変更する必要はありません。
設定は1画面で、エディターのデフォルト設定とコントロールパネルの2つの大項目があります。
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」3024-day
CodeMirror Blocksのテーマ：「3024-day」3024-night
CodeMirror Blocksのテーマ：「3024-night」Abcdef
CodeMirror Blocksのテーマ：「Abcdef」Ambiance
CodeMirror Blocksのテーマ：「Ambiance」Base16-dark
CodeMirror Blocksのテーマ：「Base16-dark」Base16-light
CodeMirror Blocksのテーマ：「Base16-light」Bespin
CodeMirror Blocksのテーマ：「Bespin」Blackboard
CodeMirror Blocksのテーマ：「Blackboard」Cobalt
CodeMirror Blocksのテーマ：「Cobalt」Colorforth
CodeMirror Blocksのテーマ：「Colorforth」Darcula
CodeMirror Blocksのテーマ：「Darcula」Dracula
CodeMirror Blocksのテーマ：「Dracula」Duotone-dark
CodeMirror Blocksのテーマ：「Duotone-dark」Duotone-light
CodeMirror Blocksのテーマ：「Duotone-light」Elegant
CodeMirror Blocksのテーマ：「Elegant」Erlang-dark
CodeMirror Blocksのテーマ：「Erlang-dark」Gruvbox-dark
CodeMirror Blocksのテーマ：「Gruvbox-dark」Hopscotch
CodeMirror Blocksのテーマ：「Hopscotch」Icecoder
CodeMirror Blocksのテーマ：「Icecoder」Idea
CodeMirror Blocksのテーマ：「Idea」Isotope
CodeMirror Blocksのテーマ：「Isotope」Lesser-dark
CodeMirror Blocksのテーマ：「Lesser-dark」Liquibyte
CodeMirror Blocksのテーマ：「Liquibyte」Lucario
CodeMirror Blocksのテーマ：「Lucario」Material
CodeMirror Blocksのテーマ：「Material」Mbo
CodeMirror Blocksのテーマ：「Mbo」Mdn-like
CodeMirror Blocksのテーマ：「Mdn-like」Midnight
CodeMirror Blocksのテーマ：「Midnight」Monokai
CodeMirror Blocksのテーマ：「Monokai」Neat
CodeMirror Blocksのテーマ：「Neat」Neo
CodeMirror Blocksのテーマ：「Neo」Night
CodeMirror Blocksのテーマ：「Night」Oceanic-next
CodeMirror Blocksのテーマ：「Oceanic-next」Panda-syntax
CodeMirror Blocksのテーマ：「Panda-syntax」Paraiso-dark
CodeMirror Blocksのテーマ：「Paraiso-dark」Paraiso-light
CodeMirror Blocksのテーマ：「Paraiso-light」Pastel-on-dark
CodeMirror Blocksのテーマ：「Pastel-on-dark」Railscasts
CodeMirror Blocksのテーマ：「Railscasts」Reactjs.org Doc Theme
CodeMirror Blocksのテーマ：「Reactjs.org Doc Theme」Rubyblue
CodeMirror Blocksのテーマ：「Rubyblue」Seti
CodeMirror Blocksのテーマ：「Seti」Shadowfox
CodeMirror Blocksのテーマ：「Shadowfox」Solarized
CodeMirror Blocksのテーマ：「Solarized」The-matrix
CodeMirror Blocksのテーマ：「The-matrix」Tomorrow-night-bright
CodeMirror Blocksのテーマ：「Tomorrow-night-bright」Tomorrow-night-eighties
CodeMirror Blocksのテーマ：「Tomorrow-night-eighties」Ttcn
CodeMirror Blocksのテーマ：「Ttcn」Twilight
CodeMirror Blocksのテーマ：「Twilight」Vibrant-ink
CodeMirror Blocksのテーマ：「Vibrant-ink」Xq-dark
CodeMirror Blocksのテーマ：「Xq-dark」Xq-light
CodeMirror Blocksのテーマ：「Xq-light」Yeti
CodeMirror Blocksのテーマ：「Yeti」Zenburn
CodeMirror Blocksのテーマ：「Zenburn」Enlighter – Customizable Syntax Highlighteの使い方
CodeMirror Blocksを使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。
投稿を編集画面↑投稿記事の編集画面でコードテキストを入力したい箇所でツールバー内のあるCodeMirror Blockボタンをクリックします。
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コードを入力するとこのようにビジュアルエディタで表示されます。
短いショートコードやCSSのコードもまったく同様の手順でOKです。
右端の歯車のマークを押すと個別設定画面が表示されます。内容は前述した項目と同じです
次は記事をプレビューして先ほど入力したHTMLコードを表示してみます。
表示を確認
CodeMirror Blocksを使って入力したHTMLコード↑PC画面ではこのように表示されます。
まとめ
CodeMirror Blocksを利用するとHTMLやCSSのコード、他のプログラム言語のコードを記事に貼り付けて紹介や解説するときに、メリハリを付けて視認性を向上して見やすく表示させることができます。
プラグインのショートコードを投稿ページ本文に貼り付けて紹介や解説する時に自動変換されないのでとくに重宝します。
設定箇所も多くなく、好みのデザインのテーマに変更するだけで、あとは初期設定ままで利用することが可能です。
コードを見やすくするプラグイン中でもシンプルなので気軽に利用することができます。
難点は設定画面が日本語になっていない点と、モノクロのテーマが無い事です。
もしシンプルな白黒のデザインが良い場合は他のコードを見やすく表示するプラグインを使った方が良いかも知れません。おすすめは「Urvanov Syntax Highlighter」です。
もっと多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓
