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は非常に多く使用されていて、評価もかなり高いプラグインとなっていますので是非インストールして使用してみてください。
コメントを残す