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

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

使うまでの手順

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

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

通常表示

［html］

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

開始する行数の指定

［html firstline=”10″］

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

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

［html autolinks=”false”］

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

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

［html toolbar=”false”］

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

行数を非表示にする

［html gutter=”false”］

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

シンプル設定

［html light=”true”］

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

折り畳んで表示

［html collapse=”true”］

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

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

［html highlight=”4,6,8″］

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

ルーラを表示させる

［html ruler=”true”］

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

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

［html tabsize=”10″］

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

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

［html autolinks=”false” light=”true” highlight=”4,6,8″］

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

Action Scriptも設定できるかな。

［as3］

mc.onRelease = function(){
	this.gotoAndPlay(10);
}

ActionScriptのバージョンは関係なさそうですね。

package{
	public class test{
			public function test(){
				trace("test");
			}
		}
	}
}

各言語の 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

この記事に関連の近い他の記事