ソースコードの種類に応じて、部分的にテキストの色を変える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 firstline="10"]

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

[html autolinks="false"]

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

[html toolbar="false"]

行数を非表示にする

[html gutter="false"]

シンプル設定

[html light="true"]

折り畳んで表示

[html collapse="true"]

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

[html highlight="4,6,8"]

ルーラを表示させる

[html ruler="true"]

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

[html tabsize="10"]

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

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

Action Script

[as3]

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

Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js