SyntaxHighlighterの記述方法


投稿日:2011年12月19日
  • 2
  • 0
  • 0



WordPressでソースコードを色分けしてくれるプラグイン「SyntaxHighlighter Evolved」を使いこなそう

コードを手軽に色分けして表示してくれる「SyntaxHighlighter」さまざまな言語に対応していて、多機能なため、説明を一読しただけだと理解しづらいところもあります。
前回「SyntaxHighlighterの導入」について書いたので、今回は記述方法を解説しようと思います。

簡単に解説すれば「言語を選択して」「ショートコードでカスタマイズ」という書式になっている。


言語の違いによる記述法解説

前回解説したとおり[php]ここにコードを入れます[/php]と入力すればPHPの構文をハイライトで表示してくれます。

WordPressでの入力例

[php]if (! defined(‘PKWK_OPTIMISE’))[/php]

サンプル

if (! defined('PKWK_OPTIMISE'))

[php]の部分を[css]に変えれば、cssの構文をハイライトで表示してくれる。
多くの言語に対応していて、それぞれ下記のように記述することで対応できる。


使える言語一覧

言語 記述方法
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

続いてショートコードの解説

ショートコードを組み合わせることで表示をカスタマイズすることが出来る。
有効無効を選択するコードでは、それぞれ「trueもしくは1」「falseもしくは0」と値を入力します。

よく使うショートコードとサンプルを見ればすぐに感覚がつかめると思います。


firstline — 行番号の出力の際に、最初の行の番号を表す数値

WordPressでの入力例

[php firstline=”10″]if (! defined(‘PKWK_OPTIMISE’))[/php]

サンプル

if (! defined('PKWK_OPTIMISE'))

行番号を表す数字が10になっている。


gutter — 左側に行番号を配置するかどうか

WordPressでの入力例

[php gutter=”false”]if (! defined(‘PKWK_OPTIMISE’))[/php]

サンプル

if (! defined('PKWK_OPTIMISE'))

左側の行番号がなくなっている。「false」の代わりに「0」と入力しても動作する。


highlight — ハイライトさせる行番号のリスト(カンマ区切り)、範囲でも指定可能。例: 2,5-10,12

WordPressでの入力例

[php highlight=”2,4-6″]
define(‘DATA_DIR’, DATA_HOME . ‘wiki/’ ); // Latest wiki texts
define(‘DIFF_DIR’, DATA_HOME . ‘diff/’ ); // Latest diffs
define(‘BACKUP_DIR’, DATA_HOME . ‘backup/’ ); // Backups
define(‘CACHE_DIR’, DATA_HOME . ‘cache/’ ); // Some sort of caches
define(‘UPLOAD_DIR’, DATA_HOME . ‘attach/’ ); // Attached files and logs
define(‘COUNTER_DIR’, DATA_HOME . ‘counter/’ ); // Counter plugin’s counts
define(‘TRACKBACK_DIR’, DATA_HOME . ‘trackback/’); // TrackBack logs
define(‘PLUGIN_DIR’, DATA_HOME . ‘plugin/’ ); // Plugin directory
[/php]

サンプル

define('DATA_DIR',      DATA_HOME . 'wiki/'     ); // Latest wiki texts
define('DIFF_DIR',      DATA_HOME . 'diff/'     ); // Latest diffs
define('BACKUP_DIR',    DATA_HOME . 'backup/'   ); // Backups
define('CACHE_DIR',     DATA_HOME . 'cache/'    ); // Some sort of caches
define('UPLOAD_DIR',    DATA_HOME . 'attach/'   ); // Attached files and logs
define('COUNTER_DIR',   DATA_HOME . 'counter/'  ); // Counter plugin's counts
define('TRACKBACK_DIR', DATA_HOME . 'trackback/'); // TrackBack logs
define('PLUGIN_DIR',    DATA_HOME . 'plugin/'   ); // Plugin directory

2,4-6」と書くことで2行目と4~6行目をハイライト表示出来る。「,」は半角なので注意。また、範囲だけの指定はできないようで、先頭に単体の数字が来ないと動作しない。範囲だけ指定したい場合は「0,4-6」とする必要がある。
といった具合にショートコード使ってカスタマイズ出来る。
firstlineで特定の行から始まって、highlightで指定の行をハイライト」といった組み合せた使い方もできる。


使えるショートコード一覧

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のみ) 折り返しの有効・無効


現在のページを共有する



現在のページに関連する記事


おすすめの記事


コメントを残す

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。面倒な登録なしでご利用になりれます。