[初心者向け]WPでソースコードを綺麗に表示。Crayon Syntax Highlighterの使い方

シェアする

自分はいつもWordPressではテキストモードで記事を書くのですが、CSSのコードなどはそのまま書けないので、WordPressの記事でソースコードを書きやすいプラグインを探しました。ソースコードを見やすく、かっこよく表示できるプラグインCrayon Syntax Highlighterセットアップから使い方までをご紹介します。

スポンサーリンク

Crayon Syntax Highlighterのインストールと設定

始めにWordPressにCrayon Syntax Highlighterプラグインを導入します。
ダッシュボードのプラグインより新規追加を選択します
キーワードに”Crayon”と入れ、Crayon Syntax Highlighterを見つけます。

crayon1

今すぐインストールをクリックします。
インストールできたら有効化をクリックします。

これでCrayon Syntax Highliterプラグインが有効化できました。

Crayon Syntax Highlighterの使い方

プラグインの有効化ができると新規投稿に「crayon」のボタンメニューが追加されます。
crayon2

ソースコードなどを貼り付けしたい場合はこのcrayonをクリックし下の画面でコードの部分に貼り付けします。

必要に応じてタイトルやその他のオプションを選択してください。フォントサイズをはじめ、表示設定などさまざまな設定をすることができます。

コードを貼り付けたら右上の挿入をクリックします。
crayon3

コードを修正したい場合は、ビジュアルモードに切り替えて、該当のソース部分をクリックで選択し、下の赤枠部部をクリックするとエディットモードに切り替わります。
crayon4

ソースの修正が終わったら更新をクリックします。

設定がデフォルトでの表示は次のような感じになります。

crayon5

記事からコードをコピーする

表示された記事のコード部分にカーソルを持っていくと、次のような表示がされます。

crayon6

赤枠のcopyをクリックすると、以下のようにコードが選択されますので、ここで”Ctrl+C”でコピーします。
コピー先で”Ctrl+V”で貼り付けます。
crayon7

まとめ

私はそれほど使う機会は無いと思いますが、WordPressでプログラミングや、HTML,CSSなどの記事を書こうというかたには便利なプラグインだと思いますのでこれからWordPressを始める方に向けてご紹介しました。

スポンサーリンク