ソースコードをカラフルに/WPプラグイン「SyntaxHighlighter Evolved」

sinta


WordPressプラグイン「SyntaxHighlighter Evolved」とは

ソースコードに色をつけて見やすくしてくれるプラグイン。

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

「あれ?このCSSなんだっけ?」。

よくありますね。

みなさんはどうしますか、ハイ、私は当然ググります。

すると、さくっと発見。

その時気がつくのが、あらゆる人が実践している「ソースコード公開」。

自分の得た知識をみなに共有するシェア文化。

得にならないはずですが、素晴らしい。

「よし!オレもやろう」。

とまあ、思ったのですが、はて「あのカラフルな表示って、どうやってるの?」。

たとえば、こんな感じのやつです。

cssの場合のソースコード。

[ccs]
.container{
width:960px;
height:auto;
margin:10px auto;
}
[/ccs]

こう表示されます。

.container{
width:960px;
height:auto;
margin:10px auto;
}

HTMLの場合のソースコード。

[HTML]
<ul class="nav">
<li><a href="http://www.sample.html">サンプルサイトへ</a></li>
<li><a href="http://www.sample2.html">サンプルサイト2</a></li>
</ul>
[/HTML]

こう表示されます。

<ul class="nav">
<li><a href="http://www.sample.html">サンプルサイトへ</a></li>
<li><a href="http://www.sample2.html">サンプルサイト2</a></li>
</ul>

PHPの場合のソースコード。

[php]
<?php
print 'Hello Word';
?>
[/php]

こう表示されます。

<?php
print 'Hello Word';
?>

ほら、なんか達人みたいでしょ?

ただ、あれこれCSSで設定したりと面倒です。

そんな時は、さすがワードプレスは横着、もといデキるやつ。

この「SyntaxHighlighter Evolved」は、
それを実現してしまう便利なプラグインです。

有効化後の設定、使い方

コードの前後に、言語タイプに応じて、たとえば、

[html]ソースコードの記述[/html]

[CSS]ソースコードの記述[/CSS]

[PHP]ソースコードの記述[/PHP]

など、対応言語をはさみこむだけで基本OK。

あとのビジュアルは勝手にやってくれるのです。

簡単ですよね。

対応言語(記述方法)
ActionScript3(as3, actionscript3)、Bash/shell(bash, shell)、ColdFusion (cf, coldfusion)、C#(c-sharp, csharp)、C++(cpp, c)、CSS(css)、Delphi(delphi, pas, pascal)、Diff(diff, patch)、Erlang(erl, erlang)、Groovy(groovy)、JavaScript(js, jscript, javascript)、Java(java)、JavaFX(jfx, javafx)、Perl(perl, pl)、PHP(php)、Plain Text(plain, text)、PowerShell (ps, powershell)、Python(py, python)、Ruby(rails, ror, ruby)、Scala(scala)、SQL(sql)、Visual Basic(vb, vbnet)、XML(xml, xhtml, xslt, html, xhtml)

表示デザインの変更

設定の「SyntaxHighlighter」で、テーマで選択します。

sint

デフォルト含めて現在は7種類。背景やカラーリングが変更します。

例えば、「Django」に変更すると。

sin02

また、「Eclipse」に変更すると。

sin03

また、「Emacs」に変更すると。
sin04

などと、変わります。

好みに応じて使ってみてください。

またこの「SyntaxHighlighter」の設定では、デフォルトの表記の変更もできます。

「 行番号を表示する」など変えられます。

sin05

ちょっと応用(ショートコードパラメータ)

設定の「SyntaxHighlighter」にショートコードパラメータについての説明があります。

<説明文から引用>

  • lang または language — ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]のように言語をタグとして記述できます。有効なタグのリストは こちらをクリック ("aliases"の下を参照)
  • autolinks — 自動リンクの有効・無効
  • classname — コードボックスに追加するCSSのclass
  • collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
  • firstline — 行番号の出力の際に、最初の行の番号を表す数値
  • gutter — 左側に行番号を配置するかどうか
  • highlight — ハイライトさせる行番号のリスト(カンマ区切り)、範囲でも指定可能。例: 2,5-10,12
  • htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
  • light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
  • padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
  • title (v3のみ) — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
  • toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
  • wraplines (v2のみ) — 折り返しの有効・無効

と、なんだか難しいですが、例えばこんな感じで使うのです。

例)gutter="false"---- (行の番号なし)

ソースコード

[css gutter="false"]
.container{
width:960px;
height:auto;
margin:10px auto;
}
[/css]

.container{
width:960px;
height:auto;
margin:10px auto;
}

例)autolinks="true"---- (自動リンク)

ソースコード

[html autolinks="true"]
<a href="http://ja.wordpress.org/"?>
WordPress 日本語ローカルサイト
</a?>
[/html]

<a href="http://ja.wordpress.org/">
WordPress 日本語ローカルサイト
</a>

例)firstline="5"---- (行の開始)

ソースコード

[css firstline="5"]
.container{
width:960px;
height:auto;
margin:10px auto;
}
[/css]

.container{
width:960px;
height:auto;
margin:10px auto;
}

例) highlight="2,4"---- (指定行のハイライト)

ソースコード

[css highlight="2,4"]
.container{
width:960px;
height:auto;
margin:10px auto;
}
[/css]

.container{
width:960px;
height:auto;
margin:10px auto;
}

など、ショートコードを使っていろんな表現ができます。

全部ではないですが、試してみてください。

まとめ

ソースコード共有文化に花を添えるプラグインです。見やすいことにこしたことはないです。
ソースを公開するようなことをしている方は使ってる価値はありそうです。

参考

ソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」


まとめ:SyntaxHighlighter Evolved の使い方 (設定&記述例)

LINEで送る
Pocket

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す