WordPress記事中にhtmlやcss、jsのコードをプラグイン「Crayon Syntax Highlighter」の導入方法と設定方法です。
目次
プラグイン導入
管理画面【プラグイン】→【新規追加】のプラグイン検索で【Crayon Syntax Highlighter】と入力しEnterで目的のプラグインを表示させ「今すぐインストール」をクリックします。
「プラグインを有効化」をクリックしてCrayon Syntax Highlighter導入完了します。
Crayon Syntax Highlighter設定
【設定】→【Crayon】より設定画面を表示し設定していきます。以下が設定画面の説明です。
①テーマの選択
コードを表示させるデザインを選択します。ドロップダウンメニューをクリックするとデザイン候補が表示されるのでサイトのイメージに合うテーマを選ぶようにしましょう。
ここでは当サイトにあわせてGitHubデザインを選択しています。
②フォントの設定
続いて表示フォントを設定します。こちらもサイトの文字の大きさや雰囲気に合わせて設定します。当サイトではフォントサイズを14pxに設定、行間はフォント倍の24px、フォントはできるだけ大きく広く見える「Verdana」を選択しています。
細かいところですが、しっかりとあなたのサイトのデザインに合わせるようにすることでユーザーは違和感なくすらすらとコードを読むことができるようになりますので結構重要ですよ！
③ツールバーの設定
ツールバーとはコード表示部の上に表示される行番号、ハイライト、コピー、別窓表示などを設定できるものですが、デフォルトではマウスオーバーすると表示される設定となっています。コードを必要としているユーザーは基本的にはコードをコピーしようとします。マウスオーバーしたときにツールバーが出てくると最上部がコピーできないときがあり個人的には「イラっ」とします。
なのでここでは【常に表示】をお勧めしています。
④折り返しの設定
ここではコードの折り返しを設定します。チェックを入れることで長いコードを自動的に折り返してくれるようになります。
とりあえずの設定は以上となります。
コードの挿入方法
【投稿】【固定ページ】→【新規登録】より投稿エディタを表示させます。Crayon Syntax Highlighterプラグインを有効化しているとビジュアル・テキストエディタに以下のボタンが追加されているのでクリックしてコードエディタを表示させます。
エディタと実際に表示は以下の図を参考にしてください。
①タイトル
ここにはコードのタイトルを入力します。
②プログラム言語
使用したコードを選択します。
③マークするライン
コードの中でも特に注目したい行を指定します。3と入力すると3行目のみハイライトとなり、複数行をまたぐ場合は3-5と入力すると3行目から5行目までがハイライトとなります。
あとがき
WordPressの記事中にコードを表示させるプラグインは有名なところでは「Crayon Syntax Highlighter」のほかに「Syntax Highlighter Evolved」がありますがこちらはワードプレスのバージョンアップとともに動きが重くなるなどの症状があるようで今回は「Crayon Syntax Highlighter」をご説明することにしました。このようにWordpressではバージョンの変化によりプラグインの動作も変化するということがあるようです。今のところ「Crayon Syntax Highlighter」でほぼ問題ないかと思うのでお勧めです。では！