ソースコードの種類に応じて、部分的にテキストの色を変える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］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
ほげほげ<br />
</body><br />
開始する行数の指定
［html firstline=”10″］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
自動でリンク設定されるURLテキストの解除
［html autolinks=”false”］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
右上に出るツールバーの解除
［html toolbar=”false”］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
行数を非表示にする
［html gutter=”false”］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
シンプル設定
［html light=”true”］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
折り畳んで表示
［html collapse=”true”］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
行を強調させる。カンマで複数設定可能
［html highlight=”4,6,8″］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
ルーラを表示させる
［html ruler=”true”］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
Tabの横幅の大きさをかえる
［html tabsize=”10″］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
行数なくしてシンプルに、自動でつくリンクを解除
［html autolinks=”false” light=”true” highlight=”4,6,8″］
<br />
<html><br />
<head><br />
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=shift_jis&quot;><br />
<title>test</title><br />
</head><br />
<body><br />
<a href=&quot;http://creator.cotapon.org&quot;>Creator Note</a><br />
</body><br />
Action Scriptも設定できるかな。
［as3］
<br />
mc.onRelease = function(){<br />
this.gotoAndPlay(10);<br />
}<br />
ActionScriptのバージョンは関係なさそうですね。
<br />
package{<br />
public class test{<br />
public function test(){<br />
trace(&quot;test&quot;);<br />
}<br />
}<br />
}<br />
}<br />
各言語の 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 |
