WordPressのソースコードを行番号付きで綺麗に表示するプラグイン「Crayon Syntax Highlighter」

   2015/04/16

以前に、WordPressでソースコードを表示する際に綺麗に表示できるプラグイン「SyntaxHighlighter Evolved」を紹介しました→WordPressでソースコードを綺麗に表示するプラグイン「SyntaxHighlighter Evolved」の使い方

crayon_syntax_highlighter

▲しかし、プラグインではどうも行番号が表示されませんでした。(SyntaxHighlighter Evolvedの設定から、行番号は表示する設定にはしています。)

現在のWordPressのバージョンに対応していない可能性があると思い、別のプラグインを探してみた所、Crayon Syntax Highlighterにたどり着きました。
参考:HTMLやCSSのコードを綺麗に紹介できる Crayon Syntax Highlighter

今回は、このCrayon Syntax Highlighterの使い方について紹介します。

スポンサーリンク

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

▲WordPress編集画面において、ソースコードを表示したい時には図のように「crayon」を選択します。

crayon_syntax_highlighter

▲そして、

  1. タイトル(任意)
  2. コードを入力
  3. 設定(お好みで)

を入力したら、右上の挿入を押します。

crayon_syntax_highlighter

▲すると、図のようにプラグイン用のコードが挿入されています。

crayon_syntax_highlighter

▲実際にプレビュー画面は、ご覧のように表示されます。適宜、色分けがされます。

まとめ

WordPressブログにおいて、行番号付きソースコードを表示したい時には、プラグイン「Crayon Syntax Highlighter」を利用すると綺麗に表示する事が出来ます。

プラグインを有効化したら、すぐに利用できるのが良い所です。

あとは、お好みで設定を自分好みの配色にすることも出来ます。

関連記事

  • このエントリーをはてなブックマークに追加
  • Pocket

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。