Movable Typeから引き継いだ記事ですが、一部でソースコードを紹介するものがありました。今までは「コードをハイライト表示 – Nanigeni Blog」で表示していたのですが、Word Pressでは便利なプラグインがあると聞きかじったので導入してみた。
iG:Syntax Hiliter 日本語版
MMRT daily lifeさんの「iG:Syntax Hiliter 日本語版」記事を参考にして作業。
プラグインのダウンロード
「ig_syntax_hilite_i18n_v3.5.zip」を自分のPCにダウンロード。
ig_syntax_hilite_i18n_v3.5.zipの解凍
「ig_syntax_hilite_i18n_v3.5.zip」を解凍する。解凍結果は下記のとおり。
解凍結果
│ COPYING │ GNU GPL.txt │ MANUAL.html │ READ ME.txt └─ig_syntax hiliter pluginフォルダ │ syntax-hilite-ja.mo │ syntax-hilite-ja.po │ syntax-hilite-ja_EUC.mo │ syntax-hilite-ja_EUC.po │ syntax-hilite-ja_SJIS.mo │ syntax-hilite-ja_SJIS.po │ syntax-hilite-ja_UTF.mo │ syntax-hilite-ja_UTF.po │ syntax_hilite.php │ └─ig_syntax_hiliteフォルダ
ファイルのアップロード
サーバにプラグインファイルをアップロードする。配置はこんな感じ、
wp-content │ ├─plugins ├ syntax_hilite.php ├ syntax-hilite-ja.mo └─ig_syntax_hiliteフォルダ
ダッシュボードから「iG:Syntax Hiliter」設定画面へアクセス。
インストール時に作成される「admin」ユーザ以外の管理者権限をもつユーザでWordPressにアクセスする。※adminユーザの場合は、iGSyntax Hiliterの設定画面でエラーが発生する。
ダッシュボード＞設定＞iG:Syntax Hiliterをクリック。
環境設定を行って「iG:Syntax Hiliterプラグイン」のインストールが完了。
iG:Syntax Hiliterの使用方法
表示させたいソースコードを所定の形式で囲む。例えばhtmlの場合は［html］～［／html］で囲む（［］は本来は半角）
［html］
<div>
<span> </span>
<p>
～ 内容 ～
</p>
</div>
［／html］ iG:Syntax Hiliterの表示例。
[html]
～ 内容 ～
[/html]