使い方

プラグイン新規追加で「SyntaxHighlighter Evolved」をインストール。
インストール後プラグインを有効化してとりあえず完了。
※細かい設定はプラグインの「設定」からいろいろ変更可能。
※ちなみにこのブログではv2を使用(v3ではツールバーが出なくなってるから)

ソースコードに対して、[言語]~[/言語]とマークアップ。
※[ ]←これは半角

たとえば、
[html] ~ [/html]の場合

<br />
1<br />

が↓こんな感じに整形表示

<br />
&lt;html&gt;<br />
&lt;head&gt;<br />
	&lt;title&gt;テスト&lt;/title&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
	&lt;p&gt;本文&lt;/p&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />

パラメータ一覧

lang または language ハイライトするコードの言語。パラメータ指定だけでなく[php]code[/php]のように言語をタグとしても記述可能。
autolinks 自動リンクの有効・無効
例: [html autolinks=”false”] 
※falseを指定すると自動リンクの解除
classname コードボックスに追加するCSSのclass
例: [html classname=”test”]
collapse コードボックスをデフォルトの状態で閉じるかどうか。
例: [html collapse=”true”] 
※trueを指定すると折り畳んで表示
firstline 行番号の出力の際に、開始する行番号の指定
例: [html firstline=”10″] ← 10から行番号開始
gutter 左側に行番号を配置するかどうか
例: [html gutter=”false”] 
※falseを指定すると行番号を非表示
highlight 行を強調させる(カンマ区切りで複数選択)。
例: [html highlight=”1,10″] 
※範囲でも指定可能→[html highlight=”1-10″]
htmlscript HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効。 
※特定の言語でしか動作しません。
light 行番号やツールバーを無効にする軽い表示モードのオン・オフ
例: [html light=”true”] 
※trueでシンプル表示
padlinenumbers 行番号の余白。false(余白なし), true (自動)、数値(余白)
title (v3のみ) コードの前に表示される表題テキスト。
toolbar ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
例: [html toolbar=”false”] 
※falseでツールバー非表示
wraplines (v2のみ) 折り返しの有効・無効
例: [html wraplines =”false”] 
※falseで折り返し無効

指定できる言語一覧

  • 言語 ——- 指定名
  • ActionScript3 ——- as3, actionscript3
  • Bash/shell ——- bash, shell
  • C# ——- c-sharp, csharp
  • C++ ——- cpp, c
  • CSS ——- css
  • Delphi ——- delphi, pas, pascal
  • Diff ——- diff, patch
  • 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

デザインカスタマイズ

デザインを変えたいときはCSSである程度変更可能。

CSSの場所は
「wp-content」→「plugins」→「syntaxhighlighter」→「syntaxhighlighter2(※v2を使っているから)」→「styles」フォルダ
の中にあるCSSファイルの中から
使用しているテーマのCSSファイルを編集。
※使用しているテーマが「Default」なら「shThemeDefault.css」というファイルを編集。
(念のため元データのバックアップは忘れずに!)