当サイトのように、ホームページの運営に関する解説を行う場合、記事上にhtmlやcssなどのコードを掲載したいことがあります。
記事本文にそのままコードを記載しても、コードにより返された結果しか記事上には見えません。
そこで、特殊な記号を使い、表示させる方法もあるのですが、WordPressブログであれば、プラグインを導入することにより簡単に記事上にコードを表示させることが出来ます。
今回は、コードを記事上に表示させるためのWordPressプラグイン『Crayon Syntax Highlighter』のインストール方法と使い方について画像を用いて丁寧に解説していきたいと思います。
Crayon Syntax Highlighterでできることと導入の必要性について
このプラグインを利用すれば、ただ、記事上にコードを表示させるられるだけでなく、下記のようにタグエディター上で表示させているかのような見やすい外観の装飾をコードに施すことが出来ます。
<h2>Crayon Syntax Highlighterのインストール方法と使い方【画像解説】</h2>
Crayon Syntax Heghlighterのインストール
WordPressへのログインとプラグインの新規追加
WordPressにログイン後、『プラグイン』⇒『新規追加』をクリックします。
検索窓に『Crayon Syntax Highlighter』と入力し、Enterキーを押します。
検索結果に表示された『Crayon Syntax Highlighter』のところの『いますぐインストール』をクリックします。
『OK』をクリックします。
プラグインの有効化
『プラグインを有効化』をクリックします。
Crayon Syntax Highlighterの使い方
記事投稿画面を開く
Crayon Syntax Heghlighterは投稿画面のエディタに付加されたボタンから利用しますので、記事投稿画面を開きます。
すると、エディタに『crayon』というタグ挿入ボタンが追加されています。
これをクリックします。
1.記事に表示させたいタグを入力
2.『挿入』をクリック
記事本文にタグが挿入されています。
『プレビュー』を押して表示を確認してみます。
表示の確認
プレビューにより表示を確認すると、下記のようになっており、正しく設置できていることがわかります。
Crayon Syntax Highlighterの設定
このプラグインの詳細設定は、『設定』⇒『Crayon』から行えますが、特に設定を変更しなくても、十分使用可能です。
以上になります。