WORDPRESSの記事にコマンドをきれいに表示したい

      2017/08/28

 

技術的なブログを書いている方は、コードやコマンドをブログに記載することが多いと思います。

わたしも、ブログを始めた頃はなにも考えず、コードをコピペしておりました。

ですが、人気ブロガーのサイトを見てみると皆さん、とてもクールに表示しているではないですか!

そこで、コードをきれいに表示する方法をひとつご紹介します。ここでは、ワードプレス優れもののプラグインEnlighter – Customizable Syntax Highlighter をご紹介します。

 

Enlighterのインストール

ワードプレスの「プラグイン」-「新規登録」の検索窓でをEnlighter – Customizable Syntax Highlighter検索します。画面下に出てきますのでインストールをクリック。

次に有効化をクリックしてインストールは完了です。

 

Enlighterの設定

管理画面の「設定」-「Enlighter」をクリック。

デフォルト言語とテーマを設定して保存。私の場合は言語:Genelic Hihglighting、テーマ:atomicを選んでいます。

これで設定は完了です。

 

Enlighterを使用する。

記事の投稿画面に移り、ビジュアルエディタを開きます。

編集ツールボタンに、このマークが追加されていますので、クリック。

 


 

ポップアップが出てくるので、コードを書き込みます。OKをクリック。

そうすると、以下のようにコードが表示されます。

ポップアップが出てくるので、コードを書き込みます。OKをクリック。

そうすると、以下のようにコードが表示されます。

 

いかがですか?これでクールなコマンドの表示ができますね。

 - ワードプレス