SyntaxHighlighterの記述方法


投稿日:2011年12月19日
  • 4
  • 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のみ) 折り返しの有効・無効

現在のページを共有する



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

WordPressにSyntaxHighlighterを導入しよう WordPressにSyntaxHighlighterを導入しよう
サーバへPukiWikiをインストール サーバへPukiWikiをインストール
PukiWikiで画像をサムネイルへ差し替える PukiWikiで画像をサムネイルへ差し替える
SyntaxHighlighterの記述方法 自前の国別IPv6、IPv4アドレス割当リストを作成しよう
SyntaxHighlighterの記述方法 PukiWikiで日本以外の国からの編集を拒否する方法
SyntaxHighlighterの記述方法 「アマレコTV」でWindows 10のPC画面に表示されている動画を撮影する方法
spam_filter.phpを導入 spam_filter.phpを導入

おすすめの記事

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集できる投稿画面を作る方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集…

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法

PukiWikiで5段階評価を付けるプラグインを作成しました

PukiWikiで5段階評価を付けるプラグインを作成しました

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

UWSCでEXCELの作業を自動化する方法

UWSCでEXCELの作業を自動化する方法

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)

公式ドキュメントよりも詳しいTinyMCEの使い方(基本編)


コメントを残す

コメントは認証制のため、すぐには反映されません。

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