ソースコードの種類に応じて、部分的にテキストの色を変えるSyntaxHighlighterというライブラリがありますが、WordPressにはプラグインがあるので簡単に導入する事ができます。
WordPress以外でSyntaxHighlighterの使い方
ソースコードに色をつけるSyntaxHighlighterの導入方法
使うまでの手順 プラグイン新規追加で SyntaxHighlighter Evolved をインストール。
インストール後「使用する」を押してとりあえず完了。 ソースコードに対して、 [html] ソースコード [/html] とマークアップ。
※［ ］←これは半角で プレビューしてみてください。できましたか？
※この段階で表示できてなかったら、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 name Brush aliases File name ActionScript3 as3, actionscript3 shBrushAS3.
いろんなブログをみていると、HTML、JavaScript、CSS、XMLやPHPのソースコードを、列番号が割り振られて、かつ部分にフォントカラーが設定されているのを見かけます。「ハイライト」って言うんですね。
WordPressプラグインSyntaxHighlighter Evolvedの使い方はこちら
WordPressでソースコードに色をつけるプラグインの使い方：SyntaxHighlighter Evolved
まさか人力で設定しているわけでもなさそうですし、どうやってるのか調べてみると、SyntaxHighlighterというJavaScriptとCSSで簡単に導入できるみたいなのでさっそく試してみました。
SyntaxHighlighterのライブラリをダウンロード ダウンロードはこちらから。
配布元：syntaxhighlighter - Google Code
解凍したフォルダー構成。
- Uncompressed
- Styles
- Script
この３つのフォルダーをアップして、
導入したいサイトのheadに下記を書きます。
HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link type="text/css" rel="stylesheet" href="http://testblog.com/Styles/SyntaxHighlighter.css" /> <script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js"></script> <!-- 表示したい言語に応じて書きます --> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushJScript.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushCss.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushPhp.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushXml.js"></script> <!-- window.
