Skip to content

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

ソースコードの種類に応じて、部分的にテキストの色を変える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
[`evernote` not found]
Pocket

34 Comments

  1. […] 以下の表は『WordPressでソースコードに色をつけるプラグインの使い方』で紹介されていたものです。少し自分の為に書き方を変えています。『SyntaxHighlighter Evolved』の使い方がとても分か […]

  2. […] WordPressでソースコードに色をつけるプラグインの使い方:SyntaxHighlighter Evolved […]

  3. […] WordPressでソースコードに色をつけるプラグインの使い方 ここを参考に、カンタンにこのページ上でもソースコードを載せることができました。 これは本当に便利だし、同じとこで躓か […]

  4. […] 以下、紆余曲折。 ・幻想的な導入に従い、例の如く動くはずがない。 ・pluginを入れるためのftpdが入っていなかった。deamonの立ち上げ方がわからなかったため時間を食った。chkconfig, servi […]

  5. […] 詳しくはhttp://creator.cotapon.org/articles/wordpress/worpressplugin_syntaxhighlighter_evolved%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9で カテゴリー: 投稿   パーマリンク ← 中古の軽自動車が・・・! お […]

コメントを残す

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