サイト制作に関するメモ書き

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

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

ソースコードをページ内できれいに表示できる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>

 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP