【WordPress】記事にソースコードを埋め込むプラグインCrayon Syntax Highlighterの使い方

Crayon Syntax Highlighterは記事内に見やすいソースコードを表示できるプラグインです。
WordPressでのカスタマイズ記事など、プログラミング解説をする場合に非常に役に立ちます。

この記事では「Crayon Syntax Highlighter」のインストール方法や使い方について解説していきます。




Crayon Syntax Highlighterのインストール

①プラグインの新規追加

ワードプレスの管理画面のサイドバーから『プラグイン』を選択し、プラグインの『新規追加』ボタンをクリックします。

②Crayon Syntax Highlighterを検索してインストール

右上の検索窓に”Crayon Syntax Highlighter”と入力し、検索したプラグインの『今すぐインストール』のボタンをクリックします。

③Crayon Syntax Highlighterの有効化

インストールが完了したら『有効化』ボタンをクリックし、プラグインを有効化します。

Crayon Syntax Highlighterの設定

Crayon Syntax Highlighterの設定は基本デフォルトで問題なく使用できます。
ここでは変更したい方のために、重要度が高い部分を紹介します。

Theme(テーマ)

テーマは50種類以上のテーマが用意されています。

デフォルトで『Classic』となっている部分でテーマを切り替え、ソースコードの表示させる部分の見た目を変えることができます。
変更後は下にプレビューが表示されるので好きなものを選びましょう。

〈テーマの例〉

・Xcode
・Dark Terminal
・Twilight

Font(フォント)

フォントの種類やサイズを指定できます。
『Monaco』となっている部分を切り替えることでフォントの種類を変更でき、『12』と表示されている場所で文字サイズを変更できます。

Metrics(サイズ)

ここでは表示サイズを変更できます。
チェック項目の上から『高さ』『横幅』『上余白』『下余白』『左余白』『右余白』です。

Toolbar(ツールバー)

ツールバーの設定ができます。
各項目は上から…

・ツールバーの表示
□コードを押し下げるのではなく、コード上に重ねて表示
□重ねて表示の場合にシングルクリックでツールバーを切り替える
□マウスアウト時にツールバーを隠すのを遅らせる
□タイトルがある時は表示
・ソース言語を表示

となっています。

各設定必要に応じて設定の変更を行いましょう。

Crayon Syntax Highlighterの使い方

設定が完了したら実際に記事エディターでソースコードを挿入していきます。

ソースコードの埋め込み

①Crayon Syntax Highlighterを開く

ビジュアルモードでは『<>』のボタン、テキストモードでは『crayon』のボタンをクリックします。

②各項目の入力

タイトル・ソースコードを入力し、Languageの『Default』を対象のプログラム言語に切り替えます。
全て入力が完了したら右上の『Add』をクリックすると記事内にソースコードの埋め込みが完了します。

表示確認

埋め込みが完了した後、実際に表示がされているか『プレビュー』で確認します。

〈記事エディターでの表示〉

〈プレビューでの表示〉

エディター内では見た目が違いますが、プレビューを見ると設定したテーマでソースコードが埋め込まれていることが確認できます。
これで公開後も問題なく表示ができることが確認できました。

Crayon Syntax Highlighterは非常に多く使用されていて、評価もかなり高いプラグインとなっていますので是非インストールして使用してみてください。


コメントを残す

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

CAPTCHA