Syntax Highlighter Evolvedの使い方｜ WPプラグイン

Syntax Highlighter Evolvedは、ソースコードについて説明するときにわかりやすく行数やハイライト表示できる便利なプラグインです。よく使うオプションについてショートコードでの指定の方法についてメモしました。

スポンサーリンク
[adSense]

行数の指定

Syntax Highlighterの便利なポイントのひとつに、はじまりの行数を指定できる点があります。ソースコードの説明をするときに、元となるソースコードの行数に合わせて表記しておけば「○行目を削除して～」など更にわかりやすくなります。

使用する属性は「firstline」
入力は以下のようになります。

[html firstline=”23″]
<a href=”#viewSource”>ソースを表示</a>
[/html]

表示は以下のようになります。

<a href="#viewSource">ソースを表示</a>

Syntax Highlighterの一番の目的であろう特定の行を目立たせるハイライトの指定。このハイライトは是非使いたいですね。複数行になる場合は、ハイフンで指定可能。

使用する属性は「highlight」
入力は以下のようになります。

[html highlight=”2,4-5″]
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<a href="#viewSource">ソースを表示</a>
</html>
[/html]

表示は以下のようになります。

<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<a href="#viewSource">ソースを表示</a>
</html>

属性は「gutter」
入力例

[html gutter=”false”]
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<a href="#viewSource">ソースを表示</a>
</html>
[/html]

表示例

<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<a href="#viewSource">ソースを表示</a>
</html>

ソースコードを閉じた状態で表示しておいて、クリックすると開くようにする。とても長いソースコードのときにいいと思います。

属性は「collapse」
入力例

[html collapse=”true”]
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<a href="#viewSource">ソースを表示</a>
</html>
[/html]

表示例

<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<a href="#viewSource">ソースを表示</a>
</html>

以上Syntax Highlighter Evolvedのよく使うオプションについてでした。他にもたくさんのオプションがあるので、今後このページに追加していこうかと思います。

オプションを使うことでソースコードの説明がしやすくなるうえに、更に見やすくなるSyntax Highlighter Evolvedのオプションについてでした。