WordPressのプラグイン『SyntaxHighlighter Evolved』の使い方

2016.12.03

ソースコードをページ内できれいに表示できるWordPressのプラグイン『SyntaxHighlighter Evolved』の指定方法をまとめてみます。

使用できる言語

使用できる言語はこちらで確認できます。

例えば、HTMLのコードを表示したい場合は[html]～[/html]で括って入力します。

入力

[html]
<ul>
<li><a href=”http://anime-eupho.com/”>響け！ユーフォニアム2</a></li>
<li><a href=”http://nobunaga-no-shinobi.com/”>信長の忍び</a></li>
<li><a href=”http://izetta.jp/”>終末のイゼッタ</a></li>
<li><a href=”http://magicofstella.com/”>ステラのまほう</a></li>
<li><a href=”http://mahoiku.jp/”>魔法少女育成計画</a></li>
</ul>
[/html]

出力結果

<ul>
<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

行をハイライトする

highlightを使ってカンマ区切りで[html highlight=”2,5″]～[/html]のように指定します。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

ハイフンつなぎで[html highlight=”2-6″]～[/html]のようにすることで、複数行指定もできます。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

先頭の行数を指定する

firstlineを使って[html firstline=”10″]～[/html]のように指定します。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

HTMLとJavaScriptやPHPが混在している場合に対応する

HTMLとJavaScriptやPHPなどの他言語が混在することはよくあると思いますが、特に設定を行っていない場合、どちらかの言語のスタイルしか適用されません。

var insert = '<ul>';
insert += '<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>';
insert += '<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>';
insert += '<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>';
insert += '<li><a href="http://magicofstella.com/">ステラのまほう</a></li>';
insert += '<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>';
insert += '</ul>';

他言語の中でHTMLのスタイルを適用したい場合、htmlscriptを使って[javascript htmlscript=”true”]～[/javascript]のように指定します。

var insert = '<ul>';
insert += '<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>';
insert += '<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>';
insert += '<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>';
insert += '<li><a href="http://magicofstella.com/">ステラのまほう</a></li>';
insert += '<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>';
insert += '</ul>';

　

コードボックスを閉じた状態にする

collapseを使って[html collapse=”true”]～[/html]のように指定します。
コードが長い場合などに有効です。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

タイトルを表示する

コードボックスの前にタイトルを表示したい場合、titleを使って[html title=”タイトル”]～[/html]のように指定します。
v3のみの対応になります。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

[html title=”2016秋” collapse=”true”]～[/html]のようにして、collapseと合わせて使うとよさそうです。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

行番号を非表示にする

左の行番号の表示を切り替えたい場合、gutterを使って[html gutter=”false”]～[/html]のように指定します。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

軽い表示モードに切り替える

行番号やツールバーを無効にする軽い表示モードに切り替えたい場合、lightを使って[html light=”true”]～[/html]のように指定します。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

行番号の桁数を指定する

padlinenumbersを使って[html padlinenumbers=”2″]～[/html]のように指定します。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

コード内のURLの自動リンクを有効(無効)にする

コード内のURLの設定を変更したい場合、autolinksを使って[html autolinks=”false”]～[/html]のようにします。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

コードボックスにclassを追加する

classnameを使って[html classname=”custom-theme″]～[/html]のようにします。
コードボックスのデザインをカスタマイズしたい場合などに有効です。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

ツールバーの表示・非表示を切り替える

toolbarを使って[html toolbar=”true”]～[/html]のように指定します。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

コードが長い場合に折り返す

wraplinesを使って[html wraplines=”true”]～[/html]のように指定します。
v2のみの対応になります。

<ul>
	<li><a href="http://anime-eupho.com/">響け！ユーフォニアム2</a></li>
	<li><a href="http://nobunaga-no-shinobi.com/">信長の忍び</a></li>
	<li><a href="http://izetta.jp/">終末のイゼッタ</a></li>
	<li><a href="http://magicofstella.com/">ステラのまほう</a></li>
	<li><a href="http://mahoiku.jp/">魔法少女育成計画</a></li>
</ul>

　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930