SyntaxHighlighter Evolved – 記事にソースコードをきれいに表示する

ネットサーフィンをしていると、ソースコードをインラインフレームで表示しているサイトを見かけます。とてもカッコいいので、自分もやりたいとずっとあこがれていたのですが、初心者には敷居が高いとあきらめていました。

<html>
<body>
SyntaxHighlighter Evolved を導入すると、こんな感じで記事の中にソースコードをきれいに表示できて、コードが長い場合は自動的にスクロールできるようになりますよ!
</body>
</html>

ところが、WordPress では SyntaxHighlighter Evolved というプラグインを導入すれば、初心者でも簡単にソースコードがきれいに表示できるようになります。

SyntaxHighlighter Evolved のインストール・有効化

1. 管理画面にログインします。

2. [プラグイン] – [新規追加] をクリックします。

[プラグイン] - [新規追加] をクリックします。

3. 検索窓に “SyntaxHighlighter Evolved” と入力し、
[プラグインの検索] をクリックします。

"SyntaxHighlighter Evolved" と入力し、[プラグインの検索] をクリックします。

4. 検索結果に表示された “SyntaxHighlighter Evolved” の下にある
[いますぐインストール] をクリックします。

2011/03/22 現在の SyntaxHighlighter Evolved 最新バージョンは 3.1.1 です。

[いますぐインストール] をクリックします。

5. 確認のメッセージが表示されますので、問題なければ [OK] をクリックします。

"本当にこのプラグインをインストールしてもいいですか?"

6. インストールが完了しましたら、[プラグインを有効化] をクリックします。

[プラグインを有効化] をクリックします。

SyntaxHighlighter Evolved が有効化されると、[設定] サブパネルに [SyntaxHighlighter] が追加されます。

[設定] サブパネルに [SyntaxHighlighter] が追加されます。

ソースコードを表示する

SyntaxHighlighter Evolved を有効化すれば、特に設定することなく
記事中にソースコードをきれいに表示することができます。

SyntaxHighlighter Evolved は、以下のコードに対応しています。

  • html
  • actionscript3
  • bash
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb
  • xml

たとえば、HTML ソースを表示させたい場合は、表示させたいソースを [html][/html] で囲うだけでコースコードが表示されます。SQL 構文であれば [sql] と [/sql] で、XML 構文であれば [xml] と [/xml] で囲うだけです。

SyntaxHighlighter Evolved を入れるだけで、クールにカッコよく記事中にソースコードが表示できるようになります。高い技術は必要ありません。

SyntaxHighlighter Evolved の設定

SyntaxHighlighter Evolved は最初から日本語に対応しています。
設定をカスタマイズしたい場合は参考にしていただければと思います。

SyntaxHighlighter Evolved のデフォルト設定

SyntaxHighlighterのバージョン:
SyntaxHighlighter のバージョンを選択します。

  • Version 3.x(デフォルト):
    ダブルクリックでコードを全選択することができるので、コピー & ペーストが簡単にできるようになっています。ただし、コードの折り返し表示ができません。
  • Version 2.x:
    コードをスクロール表示するか折り返し表示するかを選択できます。
    コードにマウスカーソルを合わせると、右上に Flash ベースボタンが表示されますので、そちらでコピー & ペーストや印刷などの操作をします。
テーマ:
ソースコードの背景を選択します。

1. Default

Default

2. Django

Django

3. Eclipse

Eclipse

4. Emacs

Emacs

5. Fade to Grey

Fade to Grey

6. Midnight

Midnight

7. RDark

RDark

8. [なし]

[なし]

すべてのブラシを読み込む:
デフォルトは OFF になっています。
「よくわからない場合は、このチェックをオフのままにしておいてください。」
と書いてありますので、私はそのままオフにしています…。

規定の設定

一般:

  • 行番号を表示する:ON(デフォルト)
    チェックを入れると行番号を表示します。
  • ツールバーを表示する:OFF(デフォルト)
    チェックを入れるとツールバーを表示します。
  • 自動リンクを有効にする:ON(デフォルト)
    チェックを入れると自動リンクが有効になります。
  • コードボックスの表示を閉じておく:OFF(デフォルト)
    チェックを入れるとソースコードが [ソースを表示] というリンク表示になります。
  • 軽い表示モードを使う:OFF(デフォルト)
    チェックを入れると行番号やツールバーが無効になります。
  • インデントタブを許容するスマートタブを使う:ON(デフォルト)
    よく分かりません…。
  • 長い行を折り返す(v2.xのみ、横スクロールバーを無効にする):ON(デフォルト)
    チェックを入れるとソースコードが長い場合は折り返します。(Version 2.x のみ)
追加のCSSのclass名(複数可能):
よく分かりません…。
行番号の開始:
行番号の開始番号を指定します。デフォルトは “1” です。
行番号の余白:
行番号の桁数を設定します。デフォルトは [なし] です。
タブのサイズ:
タブ文字のスペース数を指定します。デフォルトは “4” です。
タイトル:
ソースコードのタイトルを設定します。

パラメータを指定することによって、いろいろな表示をすることができます。
くわしくは参考記事をご覧ください。

参考:
SyntaxHighlighter Evolved のプラグインへの追加 – Bitmacroブログ

あわせて読んでおきたい記事

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

タグ


トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ