記事にコードを挿入できるプラグインCrayon Syntax Highlighterの使い方

スポンサーリンク



ワードプレスを使っていると、Webサイト上でHTMLやcssを解説したいと思うことがあります。

↑こんな感じで

記事にそのままコードをコピペすると見た目が悪いし、何より分かりにくくなってしまうので、こんな風に綺麗に分かりやすく表示させたいですよね。

そこで今回は、Webサイト上でソースコードを綺麗に表示できるプラグイン、Crayon Syntax Highlighter(クレヨン・シンタックス・ハイライター)を紹介致します。

Crayon Syntax Highlighterとは

Crayon Syntax Highlighterはワードプレスで動作するプラグインで、導入するとボタンひとつで簡単にコードを挿入できるようになります。

すごく便利なので、scc解説の記事を多く書く方にはぜひ試していただきたい。

Crayon Syntax Highlighterをインストール

早速Crayon Syntax Highlighterをインストールしましょう。

【1】ワードプレスの左側にあるメニューから「プラグイン」→「新規追加」と進みましょう。

プラグインの検索画面に「Crayon Syntax Highlighter」と入力して検索しましょう。

【2】「インストール」して「有効化」しましょう。

Crayon Syntax Highlighterを設定する

【1】Crayon Syntax Highlighter プラグインを有効化したら、管理画面左メニューの「設定」→「Crayon」に進みます。

【2】各種設定
コードを貼り付けるだけならデフォルトのままでも大丈夫ですが、基本的な設定だけ以下に載せておきます。

テーマ
テーマの編集ができます。

フォント・サイズ
ハイライト表示のフォントやサイズを設定できます。

英語

日本

ツールバー
ソースコード上部に表示されるツールバーの設定できます。

英語

日本語


行番号の表示などを設定できます。

英語

日本語

コード
コードに関する設定ができます。

英語

日本語

タグ
タグの設定ができます。

英語

日本語

その他
その他を設定ができます。

英語

 

日本語

初期設定では、CrayonのCSSとJavaScriptが全てのページで読み込まれてしまいますが、「その他」の設定の「必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる」にチェックを入れれば、関係ないページの表示速度スコアは若干改善されるようです。

【3】変更を保存
最後に「変更を保存」をクリックして設定完了です。

記事にコードを挿入する

【1】設定が終わったら、記事の投稿編集画面へ進みましょう。

ツールバーに「crayon」というボタンが表示されているので、クリックして操作してみましょう。

【2】「Add Code」が開きますので、「Code」欄は表示させたいコードを入力します。


タイトル:コードの内容について任意でタイトルを付けることができます。
プログラム言語:表示させるコードの種類を選択します。デフォルトのままでOKです。
コード:表示したいソースコードを入力します。
テーマ:記事内に挿入された際の表示デザインを選択することができます。

【3】最後にAdd Codeウィンドウ右上の「Add」をクリックすると、記事にコードを挿入することができます。

公開ページでは下記のような表示ができています。↓

一度挿入したソースコードを編集する方法

【1】ビジュアルエディタから再編集したいソースコードの部分をクリックし、<>このメニューボタンをクリックします。

【2】Crayon Syntax Highlighterの編集画面が表示されるので、 訂正し終わったら「Add」ボタンを押します。

これで編集完了です。

まとめ

ワードプレスの記事内でソースコードを表示させるとき、ビジュアルエディタでそのまま入力すると、記事として公開されたコードが見にくかったり、コピー&ペーストした際にエラーが出ることもありますが、Crayon Syntax Highlighterを使えば簡単に記事に載せることができます。

Crayon Syntax Highlighterの良いところは、記事内でCrayon Syntax Highlighterを使用したコードを、閲覧者が簡単にコピペすることができる点です。

ソースコード上にマウスを合わせると、上にメニューバーが表示されてコピーボタンで簡単にコピペできます。

利用者にとっても読者にとっても使いやすいプラグインだと思いました。

スポンサーリンク



スポンサーリンク



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です