Crayon Syntax Highlighter-ソースコードを埋め込む方法

スポンサーリンク

Crayon Syntax Highlighter-ソースコードを埋め込む方法

プログラミング関連のブログやサイトを運営している場合は、ソースコードを紹介することが多いと思います。

その際に便利なのが『Crayon Syntax Highlighter』というWordPressのプラグインです。

このプラグインを使用すると、以下のようなデザインでソースコードを埋め込むことができます。

しかも、とても簡単に操作することができます。

スポンサーリンク

Crayon Syntax Highlighterをインストールしよう

まずは、ご自身のWordPressに『Crayon Syntax Highlighter』をインストールしましょう。

プラグインを入れたことがある方は、すでにお分かりだと思います。

まずは、WordPressのダッシュボードから『プラグイン』→『新規追加』を選択してください。

プラグイン→新規追加を選択

すると、プラグインを追加する管理画面に移動しますので、右上にある検索フォームに『Crayon Syntax Highlighter』と入力してください。

Crayon Syntax Highlighterを今すぐインストール

上記の赤枠のプラグインをインストールしますので、『今すぐインストール』を押してください。

しばらくすると、ボタンが『有効化』に変化しますので、そちらも押してください。

少し待てば、インストールの完了です。

Crayon Syntax Highlighterの設定をしよう

次に、インストールした『Crayon Syntax Highlighter』の設定を行っていきます。

基本的には、デフォルトの設定で良いのですが個人的に一点だけ変更したほうが良い箇所がありますので、そちらをご紹介いたします。

まず、ダッシュボードから『設定』→『Crayon』を選択してください。

設定→Crayonを選択

すると、以下のような設定画面が表示されます。

Crayon Syntax Highlighter設定画面

ここで、設定を行うことができます。

英語で書かれていますので少しわかりずらいですが、表示されるデザインフォントの設定などもできます。

特に、こだわりがなければ変更しなくても大丈夫です。

今回、変更を行う個所は『Toolbar』のカテゴリの『Display the Toolbar』です。

これは、

Crayon Syntax Highlighterツールバー

ここのことです。

これを、表示されるタイミングを設定していきます。

デフォルトでは、『On MouseOver』になっています。これは、埋め込んだソースコードにマウスカーソルをあてると表示されます。

それのなにが問題かというと、一行目にツールバーがかぶってしまうことがあるからです。

それを避けるために、『Display the Toolbar』は『Always』にしておきましょう。

こうすることで、常にツールバーが表示されるようになります。

変更したら、下のほうにある『Save Changes』を押して設定を保存しましょう。

記事にソースコードを埋め込む方法

では、実際にソースコードを埋め込んでいきましょう。

Crayon Syntax Highlighter』をインストールすると、記事作成の際に使用するツールバー

Crayon Syntax Highlighterマーク

このようなマークが追加されます。

こちらをクリックしていただくと

Crayon Syntax Highlighter埋め込み画面

このような画面が表示されます。

ここに、ソースコードをを入力していきます。

  • Title → ツールバーに表示されるタイトル
  • Code → 埋め込みたいソースコード

上記、2か所を入力して右上の『Add』をクリックすれば、ソースコードを埋め込むことができます。

たったこれだけで、ソースコードを埋め込むことができますので、とても便利です。

また、先ほどの画面で個別の設定を行うことができます。

このように、一つだけデザインを変更することも可能です。

まとめ

今回は、記事にソースコードを簡単に埋め込むことができるプラグイン、『Crayon Syntax Highlighter』をご紹介しました。

設定画面が英語なのが少し残念なところではありますが、ほとんどデフォルトの設定でいいですし、操作方法も簡単なので問題ありません。

運営するサイトにソースコードを埋め込みたいときは、ぜひ使ってみてください。

コメント