WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

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

この記事は約7分4秒で読めます

WordPress Crayon Syntax Highlighter
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

WordPressで記事を書く中で、ソースコードを紹介したい時が私の場合はよくあります。
ただ、ソースコードには特殊文字が多く含まれるのでそのままだと思ったように表示ができませんね。

そこでWordPressプラグインの「Crayon Syntax Highlighter」を使ってソースコードをきれいに表示する方法をご紹介したいと思います。まずはソースコードを表示するときのタグについて軽く説明していきます。

HTMLでソースコードを表示するときのタグは?

ソースコードをWebページで表示するときは

<pre>…</pre>
<code>…</code>

この2つのタグを使います。
ただし、<code>タグはインライン要素インライン要素とは、ブロックレベル要素の内容となるような要素。 文章の一部分として扱われるので前後で改行されて表示されるようなことはない。なので半角スペースや改行を表現できません。
ソースコードを書くときは<pre>タグを使います。

pre 要素とは

preとはPreformatted Text(整形済みテキスト) の略です。
連続したスペースや改行、行間がソース上に書かれたままの状態で表示します。

改行タグ使わなくても改行されるから便利ジャン!・・・と思うかもしれませんが
右端まで行っても文字は自動で折り返しされませんので、<pre>タグは本文に使用してはいけません。

pre 要素の特徴

  • 等幅フォント(すべての文字の文字幅が同じフォント)で表示されます。
  • 自動的に改行しません。
    通常ブラウザの幅端までくる文章は自動で折り返しされますが、pre を使うと一行に延々と文章が続き横スクロールバーが表示されてしまいます。適宜改行を入れる必要があります。
  • 制限があります。
    • <pre> ~ </pre> の中に使える要素は、インライン要素に限られます。が、文字の大きさや行の高さを変更するような要素は使えません。使えない要素は、img、object、applet、big、small、sub、sup、basefont、font があります。a(アンカー) 、b(文字を太くする)、em(強調) 等は使えます。
    • 特殊文字の表示の仕方
      HTML で特別な意味をもつ「<」や「>」等はタグとして解釈されるので、これらの記号を表示させたい場合は、< → &lt; > → &gt; & → &amp; " → &quot; と記述します。

    ソースコードを綺麗に表示できる「Crayon Syntax Highlighter」プラグイン

    <pre>タグでソースコードを表示することはできますが、ソースコードは色分けされていないと見づらいです。ソースコードをきれいに表示するプラグインはたくさんありますが、「Crayon Syntax Highlighter」プラグインを導入します。

    いくつか試した中でも私好みの設定ができたので使っております。

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

    WordPressの管理画面から検索してインストールします。もしくは、WordPress.org からダウンロードして、そのままアップロードしてインストールします。

    WordPress管理画面 プラグイン 新規追加 Crayon Syntax Highlighter」で検索

    実際に導入するとこのように綺麗にソースコードを表示することができます。

    対応言語

    「Crayon Syntax Highlighter」は現在54種類のプログラム言語をサポートしています。

    1. C1
    2. ABAP
    3. ActionScript
    4. AmigaDOS
    5. Apache
    6. AppleScript
    7. Arduino
    8. Assembly (x86)
    9. AutoIt
    10. C
    11. C#
    12. C++
    13. Clojure
    14. CoffeeScript
    15. CSS
    16. Delphi/Pascal
    17. Delphi Web Script
    18. Diff
    19. Erlang
    20. Go
    21. Haskell
    22. HTML
    23. INI
    24. Lisp
    25. Lua
    26. Microsoft Registry
    27. MIVA Script
    28. Monkey
    29. MS-DOS
    30. MySQL
    31. Java
    32. JavaScript
    33. Objective-C
    34. Papyrus
    35. Perl
    36. PHP
    37. PL/SQL
    38. PostgreSQL
    39. PowerShell
    40. Python
    41. R
    42. Ruby
    43. Rust
    44. Scheme
    45. Shell
    46. Swift
    47. Transact-SQL
    48. TeX
    49. Vim
    50. Visual Basic
    51. Visual Basic .NET
    52. YAML
    53. ZSH
    54. Others will be added when requested

    「Crayon Syntax Highlighter」の設定

    デフォルトの状態だと使い勝手がよくなかったので少し設定を変更しました。
    変更した箇所についてご紹介します。

    WordPress管理メニューの設定 > Crayon を選択して設定画面を表示します。

    テーマの設定

    「Crayon Syntax Highlighter」は現在47種類のテーマが用意されています。
    さらに自分だけのオリジナルテーマを作ることも可能です。

    1. 1c Kod
    2. 1c Zapros
    3. 809finest
    4. Ado
    5. Arduino Ide
    6. Bncplusplus
    7. Capacitacionti
    8. Cg Cookie
    9. Cisco Router
    10. Classic
    11. Coda Special Board
    12. Dark Terminal
    13. Eclipse
    14. Epicgeeks
    15. Familiar
    16. Feeldesign
    17. Github
    18. Idle
    19. Inlellij Idea
    20. Iris Vfx
    21. Light Abite
    22. Mirc Dark
    23. Monokai
    24. Neon
    25. Obsidian
    26. Obsidian Light
    27. Onderka15
    28. Orange Code
    29. Powershell Ise
    30. Pspad
    31. Raygun
    32. Secrets Of Rock
    33. Shell Default
    34. Solarized Dark
    35. Solarized Light
    36. Son Of Obsidian
    37. Ssms2012
    38. Sublime Text
    39. Terminal
    40. Tomorrow
    41. Tomorrow Night
    42. Turnwall
    43. Twilight
    44. Visual Assist
    45. Vs2012
    46. Vs2012 Black
    47. X3info

    テーマを変更して「Sublime Text」っぽくする

    Crayon Syntax Highlighter Sublime Text

    テーマ:Sublime Text
    「リアルタイムのプレビューを有効にする」にチェックする
    「ヘッダー内のエンキューテーマ」にチェックする

    これでSublime Textっぽいカラーになります。
    私のおすすめのテーマは「Sublime Text」か「Cg cookie」ですね。

    テーマの色カスタマイズ

    Crayon Syntax Highlighter Duplicate

    Crayon Syntax Highlighterはテーマで使用されている色を好きな色に変更できます。
    まずは元となるテーマを選択して「Duplicate」ボタンで複製します。

    Crayon Syntax Highlighter Edit

    複製すると「Edit」ボタンから「テーマエディタ」画面が表示されて編集可能になります。
    様々な色の設定が行えますので、お好みで変更してください。

    テーマの変更後は「更新」ボタンを押して保存することをお忘れなく。

    フォント

    Crayon Syntax Highlighter フォント

    フォント:Droid Sans Mono
    フォントサイズ指定: 12ピクセル
    Line Height 17ピクセル
    「ヘッダー内のエンキューフォント」にチェックする

    サイズ

    Crayon Syntax Highlighter サイズ

    上余白:12px
    下余白:12px
    回り込み:なし
    インラインマージン:5pxピクセル

    その他はチェックを外す

    ツールバー

    Crayon Syntax Highlighter ツールバー

    ツールバーの表示:常に表示
    「タイトルがある時は表示」にチェックする
    ソース言語を表示:常に表示

    2015.11.05追記 ツールバーを個別に表示させない指定

    <pre>デフォルトはツールバーを表示する。</pre>

    デフォルトはこのように上部にツールバーが表示されます。
    稀にこのツールバーを表示させたくない場合がありまして、その時はclass="toolbar:2"指定をしてあげれば良いです。

    <pre class=”toolbar:2″>ツールバーを表示させない。</pre>

    Crayon Syntax Highlighter 行

    「コード行を縞模様で表示する」にチェックする
    「重要な行にマーキングを有効にする」にチェックする
    「Enable line ranges for showing only parts of code」にチェックする
    「デフォルトで行番号を表示」にチェックする
    「行番号の切り替えを有効にする」にチェックする
    「Wrap lines by default」のチェックを外す
    「Enable line wrap toggling」のチェックを外す

    コード

    Crayon Syntax Highlighter コード

    変更箇所は特になし

    タグ

    Crayon Syntax Highlighter タグ

    「 Crayonsとして<pre>タグをキャプチャ」にチェックを入れます(重要)

    「Crayon Syntax Highlighter」の使い方

    ビジュアルエディタ、テキストエディタに「Crayon」ボタンから細かい設定も行えます。
    私の場合はpreタグで囲って表示するように統一しています。

    preタグで囲む

    <pre>こんな感じで囲みます。</pre>

    オプション指定

    <pre title=”タイトル” lang=”php” mark=”5-10″ start-line=”10″ range=”2-9″ decode=”false” >…</pre>

    このようにpreタグにオプションを指定することができます。
    個々のオプションについて解説します。

    titleオプションを付けると上部メニューにタイトルを表示されます。

    lang

    langオプションを付けるとプログラム言語を指定できます。

    start-line

    start-lineオプションは行番号の開始行の値を指定できます。
    デフォルトはプラグイン設定の行番号の開始数字になります。

    mark

    markオプションは特定の行にハイライトで表示できます。
    ソースの変更箇所をハイライト表示することができるので便利です。

    「mark=”7″」と数値で指定します。
    「1,3,5」「5-10」のような形式でも記述可能です。

    よく使用するオプションは上記のものです。
    他にもオプション使えますので、詳しく知りたい方は公式サイトをチェックしてください。

    さいごに

    Crayon Syntax Highlighterは、ソースコードを綺麗に表示してくれるプラグインです。
    エディタのように見栄えよく表示してくれます。

    指定した行にマークを付けることもできるので使い勝手も良く、非常に役立つプラグインです。
    自作のソースコードを紹介する時などにぜひ使ってみてください。

    以上、WordPressでソースコードを綺麗に表示できる「Crayon Syntax Highlighter」プラグインでした。

関連記事

  1. ライオン 親 子
  2. WordPress 動画のレスポンシブ対応
  3. TablePress
  4. MacBook Airのキーボードを入力する手
  5. こたつの上でパソコンを触る男性
  6. WordPressコメント メールアドレス任意入力

PR

カテゴリー