WordPressの投稿記事中のHTMLやCSSコードをきれいに装飾するプラグイン3種

2017年7月20日

Free-Photos / Pixabay

WordPressの記事を書いていると、CSSやHTMLのコードを書いて説明する場合があります。その時のコードを色付けしてわかりやすくするのがこれらのプラグインです。
3つ紹介しますが、1つは現在のWordPress4.8には対応していません。

スポンサーリンク

Crayon Syntax Highlighter

 人気のプラグインですで、50種類以上のプログラム言語をサポートしています。

インストール

「ダッシュボード」→「プラグイン」→「新規追加」と移動して、右上のキワードに
「Crayon Syntax Highlighter」と入れます。出てきたプラグインで「今すぐインストール」をクリックします。

インストールが終わったら、「有効化」ボタンをクリックしてください。

使い方

次に、「ダッシュボード」→「投稿」→「新規追加」をクリックします。すると画面が変わります。下図の様に「<>」というアイコンが追加されていれば正しくインストールされている証拠です。

ちょっとした文章を書いてみました。その下にコードを表示させるようにします。

コードを表示させたい位置にカーソルを置いたら、「<>」ボタンを押します。すると下図のような画面がポップアップしてきますので、codeと書かれた欄に書き込む、もしくはコピーアンドペーストをします。
簡単に使うために、その他の編集はしなくても大丈夫です。

コードを貼り付けると下図の様になります。必要に応じて上部のLanguageでプログラミング言語を選ぶこともできます。
書き終わったら、右上にある「Add」をクリックすると終了です。

コードが追加されると下図の様に、コード部分が囲われているのがわかります。

保存して、プレビューを押すと下図の様にきれいにコードが装飾され、見やすくなっています。

Enlighter – Customizable Syntax Highlighter

今回紹介するプラグインの中ではマイナーですが、高評価は高いです。

インストール

「ダッシュボード」→「プラグイン」→「新規追加」と移動して、右上のキワードに
「Enlighter – Customizable Syntax Highlighter」と入れます。出てきたプラグインで
「今すぐインストール」をクリックします。

インストールが終わったら、「有効化」ボタンをクリックしてください。

使い方

次に、「ダッシュボード」→「投稿」→「新規追加」をクリックします。すると画面が変わります。
下図の様に「{…}」というアイコンが追加されていれば正しくインストールされている証拠です。

コードを表示させたい位置にカーソルを置いたら、「{…}」ボタンを押します。すると下図のような画面がポップアップしてきますので、空白欄にコードを書き込む、もしくはコピーアンドペーストをします。

表示に使える言語はHTMLやCSS、PHP、SQL、Pythonなど28種類です。お好みで選択してください。
コードの貼り付けができたら右下のOKボタンをクリックしてください。

編集が終わると下図のような画面になります。

保存をしてプレビューをすると下図の様になり、きれいに色分けされているのがわかります。

コードの色合いも非常にシンプルですので、これで十分だというならそれで問題ないと思います。

 

SyntaxHighlighter Evolved

これ も人気のプラグインです。便利に使う為に、 SyntaxHighlighter TinyMCE Button の
インストールも必要です。しかし、現在のWordPressのバージョン(4.8)ではサポート
されておらず、色々と試しましたが、編集できませんでした。ですので対応するまで待つ
必要があります。

 

スポンサーリンク