• RSS

[WP]ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ソースコードなどをハイライト表示できるWordPress プラグイン「Crayon Syntax Highlighter」のご紹介です。

Crayon Syntax Highlighter プラグインのインストール

管理画面のプラグイン新規追加より Crayon Syntax Highlighter を検索するか、以下のページからプラグインファイルをダウンロードします。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」


Crayon Syntax Highlighter の設定

Crayon Syntax Highlighter プラグインを有効化したら、管理画面左メニューの「設定」 > 「Crayon」に進みます。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

Crayon Syntax Highlighter 設定ページで、以下の各項目の設定を行います。
設定項目が非常に多いですが、ソースコードをハイライト表示させるだけであれば、
以下の設定箇所を変更する程度で問題ありません。

テーマ

まずはハイライト表示の際の「テーマ」を選択します。
デフォルトが「Classic」になっていますので、テーマの選択肢より好きなテーマを選択します。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

「Duplicate」ボタンをクリックすると、現在のテーマをコピーして自由に編集できるようになります。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

フォント・サイズ

ハイライト表示の際のフォントやサイズを選択します。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

ツールバー

ソースコード上部に表示されるツールバーに関する設定を行います。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

行を設定します。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

コード

コードに関する設定を行います。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

タグ

タグを設定します。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

その他

その他を設定します。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

記事本文のソースコードをハイライト表示させる

Crayon Syntax Highlighter ページでの設定が終わったら、記事の投稿編集画面へ進みます。
エディタのツールバーに「crayon」ボタンが表示されているかと思いますのでクリックします。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

「Add Code」ウィンドウが開きますので、必要に応じて「Title」欄にソースコードのタイトルを入力し、「Code」欄にはハイライト表示させるソースコードを入力します。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

「Add Code」ウィンドウ内の「Settings(設定)」ですが、基本的には上記で紹介させていただいたCrayon Syntax Highlighter ページの設定内容が優先されますが、記事毎にスタイルを変更するなど、個別に変更することも可能です。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

最後に「Add Code」ウィンドウ右上の「Add」リンクをクリックすると、
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

記事本文でソースコードが<pre>タグで囲まれた状態になります。
ソースコードをハイライト表示できるプラグイン「Crayon Syntax Highlighter」

ブログでは↓このように表示されます。




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください