ソースコードの種類に応じて、部分的にテキストの色を変えるSyntaxHighlighterというライブラリがありますが、WordPressにはプラグインがあるので簡単に導入する事ができます。 ▼WordPress以外でSyntaxHighlighterの使い方 ソースコードに色をつけるSyntaxHighlighterの導入方法

使うまでの手順

  1. プラグイン新規追加で「SyntaxHighlighter Evolved」をインストール。
  2. インストール後「使用する」を押してとりあえず完了。
  3. ソースコードに対して、[html]ソースコード[/html]とマークアップ。
    ※[ ]←これは半角で
  4. プレビューしてみてください。できましたか?
    ※この段階で表示できてなかったら、WordPressの外観からheader.phpにと、footer.phpにが入っているか確認してみてください。もし、入ってなければ、はの直前、はの直前に記入してください。

通常のSyntaxHighlighterはpreタグに対してnameとidをつけましたが、WordPressのSyntaxHighlighter Evolvedは[ ]←この括弧に種類を書いてパラメータを書いていきます。

通常表示

[html]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
ほげほげ
</body>

開始する行数の指定

[html firstline=”10″]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

自動でリンク設定されるURLテキストの解除

[html autolinks=”false”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

右上に出るツールバーの解除

[html toolbar=”false”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数を非表示にする

[html gutter=”false”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

シンプル設定

[html light=”true”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

折り畳んで表示

[html collapse=”true”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行を強調させる。カンマで複数設定可能

[html highlight=”4,6,8″]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

ルーラを表示させる

[html ruler=”true”]

<html>
<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
<title>test</title>
</head>
<body>
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Tabの横幅の大きさをかえる

[html tabsize=”10″]

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

行数なくしてシンプルに、自動でつくリンクを解除

[html autolinks=”false” light=”true” highlight=”4,6,8″]

<html>
<head>
	<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;>
	<title>test</title>
</head>
<body>
	<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a>
</body>

Action Scriptも設定できるかな。

[as3]

mc.onRelease = function(){
	this.gotoAndPlay(10);
}
ActionScriptのバージョンは関係なさそうですね。
package{
	public class test{
			public function test(){
				trace(&quot;test&quot;);
			}
		}
	}
}

各言語のbrushと対応JavaScript(SyntaxHighlighter ver.2.0.320)

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js
WordPressでソースコードに色をつけるプラグインの使い方:SyntaxHighlighter Evolved

34 thoughts on “WordPressでソースコードに色をつけるプラグインの使い方:SyntaxHighlighter Evolved

コメントを残す

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