カスタマイズノトリセツ

STINGER PLUS+ を始めとした、WordPressテーマのカスタマイズ情報を中心に取り扱うブログ。取扱説明書の様な丁寧な記事を心がけています。

プラグイン関連

記事内にソースコードを埋め込み表示できるWordPressプラグイン「Crayon Syntax Highlighter」

2016/06/23

開発者の皆様で、WordPressを利用している方であれば、「自分の書いたソースコードを記事にしたい」と思った事が一度はあるのではないでしょうか。

当サイトではカスタマイズ情報を発信している事もあり、ほぼ必須のプラグインとなります。いやこれから書くんですけどね。

そういったコードの紹介記事を書く際には必須となるソースコード埋め込み表示プラグイン「Crayon Syntax Highlighter」のインストールから利用方法まで、今回はご紹介したいと思います。

ソースコードを埋め込み表示できるWordPressプラグイン

今回紹介するようなWordPressプラグインは「Crayon Syntax Highlighter」の他にも多数あります。

これじゃないとダメ!というような理由や、特別突出しているようなプラグインが有るわけではないのですが、強いて言うのであれば、「Crayon Syntax Highlighter」には以下のような特徴があります。

  • 日本語に対応済
  • なので操作性も分りやすい!
  • デフォルト設定でも表示がキレイ!!
  • クレヨンってなんか響きがかわいいよね!!!

以上です。僕が初めて使ったソースコード埋め込み表示プラグインが「Crayon Syntax Highlighter」なので、他のプラグインを試してみても最初に触れたものが慣れ親しんでいて使いやすいというのも大いにありますが。

どういった理由であれ、デファクトスタンダードとなり得るにはそれだけの良さがあるものです。まずはインストールして触れてみるのが良いでしょう。

「Crayon Syntax Highlighter」のインストール

WordPressプラグインはテーマとは異なり、公式ディレクトリに登録されているプラグインでほぼ全ての要望に対応する事が出来るかと思います。

そんなわけで今回もWordPress管理画面にログインし、左側の「プラグイン」メニューから「新規追加」を選択。

Torisetu0039

プラグインの一覧画面が表示されますので、右上の「プラグインの検索」ボックスにインストールしたいプラグイン名を入力しましょう。

Torisetu0040

今回は「Crayon Syntax Highlighter」と入力してエンターキーをどーんと。

Torisetu0041

すると無事に一番左上に該当のプラグインが表示されたかと思います。枠内の「今すぐインストール」をクリック。

Torisetu0042

インストールの過程が表示されます。「インストールが完了しました」と表示されている事を確認して「プラグインを有効化」をクリックです。

Torisetu0043

これでインストールは完了。インストール済プラグインの一覧の中で「Crayon Syntax Highlighter」が薄青色の背景で表示されている事が有効化済の証。

Torisetu0044

「Crayon Syntax Highlighter」の使い方

それでは早速有効化した「Crayon Syntax Highlighter」を使ってみましょう。あっという間に使えますよ。

まずは記事の投稿画面に移動して上部ツールバーの一番右「< >」のアイコンをクリック。ピンクの枠つけてるやつです。

Torisetu0045

すると「Crayon Syntax Highlighter」のウィンドウがポップアップ表示されます。

Torisetu0046

「タイトル」にはタイトルを「コード」には紹介したいソースコードを記述して、「挿入」ボタンをクリックです。

Torisetu0047

完了すると、エディター上に灰色の枠が引かれ、その中に挿入したソースコードが表示された状態になります。

Torisetu0048

プレビューで確認。無事にキレイにソースコードを埋め込む事が出来ましたね。

Torisetu0049

ちなみに「ハイライター」というだけあって、指定した行をハイライト表示することも可能。「マークするライン」に数字を指定して(今回は「3-4」と指定)

Torisetu0050

この状態で挿入したものをプレビューで確認すると、無事に3行目と4行目がハイライト(色付き網掛け)表示されています。

Torisetu0051

上記と同じものをここにも埋め込んでみました。カーソルを合わせるとタイトルに入力した文字が表示されます。

 

デフォルト設定のままでもキレイに表示されて大満足な「Crayon Syntax Highlighter」ですが、こだわり派の為に豊富な設定も用意されています。

Torisetu0052

Torisetu0053

以上、「Crayon Syntax Highlighter」のご紹介でした!

ここまで見て分かる通りですが、「Crayon Syntax Highlighter」は複雑な設定も必要なく、キレイに見やすいコード紹介を実現してくれるプラグインです。

ソースコードを頻繁に紹介するような記事を書く方は是非導入してみてくださいね!

-プラグイン関連
-, ,