今回は、Wordpressの記事上に、htmlなどのソースコードを
綺麗に表示させる方法を解説したいと思います。
マルコは【Crayon Syntax Highlighter】を使用していたのですが、
最近見たら、【Crayon Syntax Highlighter】は検索しても
出てこなくなったようなので、代わりのものを探してみました。
それが、【Enlighter – Customizable Syntax Highlighter】です。
使い方はCrayon Syntax Highlighter とよく似ていて、
むしろ簡単になっている印象ですので、初めての方も使いやすいかと。
それでは、解説に入りましょう＾＾
【Enlighter – Customizable Syntax Highlighter】のインストール
WordPressのダッシュボードにログインしておきます。
①【プラグイン】をクリックし、
②【新規追加】をクリックします。
画面が切り替わったら、右上の【キーワード】欄に、
【Enlighter – Customizable Syntax Highlighter】と入力して、Enterキーを押します。
検索結果の中から【Enlighter – Customizable Syntax Highlighter】を探して
【今すぐインストール】をクリック。
少し待つとインストールが完了して下のような画面になるので
【プラグインを有効化】をクリックします。
これでプラグインのインストールは完了です。
画面を記事の投稿画面に切り替えましょう。
【Enlighter – Customizable Syntax Highlighter】の使い方
①投稿画面の中で、コードを表示させたい場所にカーソルを表示させます。
②【Enlighter Code Insert】というボタンをクリックします。
コードを挿入する画面が表示されます。
①赤枠の部分に表示させたいコードを入力またはコピペし、
②【OK】をクリックします。
他の部分はさわらなくて大丈夫です。
投稿画面では、下のように表示されます。
プレビューで見ると、こんな感じ。
コードが綺麗に表示されています。
コード上にマウスを合わせると、赤枠のようなボタンが表示されます。
このままでも良いのですが、邪魔に感じるようでしたら非表示にしましょう。
①ダッシュボードの【<>Enlighter】をクリックすると、プラグインの設定画面が表示されます。
②各ボタンのチェックを外すと非表示になります。
③【変更を保存】をクリックします。
これで完了です♪
英語表記なので一瞬ひきますが、意外と簡単ですね♪
それでは今回は、このへんで(@^^)/~~~