ソースコードをきれいに表示させたい

7月 20, 2012 by ひさっち in wordpress

よくサイトの制作の合間に、プラグインやjqueryのコードのサンプルを見てまわているときに、コードが行表示されたりなど見やすくなっているのは何かプラグインがあるんだろうなと思っていました。

実際に自分がやる時にならないと検索すらしてなかったです。

以下のサイトを参考にさせていただきました。
ソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」

導入方法は簡単。

ステップ1：「SyntaxHighlighter Evolved」というキーワードでプラグインを検索・追加

WP内の「プラグイン」メニューから検索してインストール。

WPがいいなって思う瞬間のひとつがこのプラグイン導入の気軽さ。

ステップ2：プラグインの設定を好みのものに変更

デフォルトで良ければこのステップは要らないけども。
以下の様ないろんな設定ができるようです。

行番号を表示する
ツールバーを表示する
自動リンクを有効にする
コードボックスの表示を閉じておく
軽い表示モードを使う
インデントタブを許容するスマートタブを使う
長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)

ステップ3：記事内にコードを書いてみよう！

導入はここまでで、あとは実際に書くだけです。記述方法も簡単。

該当のコードを

[表記したい言語]と[/表記したい言語]

でくくるだけ。

実際にはこんな感じになります。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>
</head>
<body>
<div id="relate_post">
	<h2>今エントリーに関連する記事はこちら</h2>
	<ul>
		<li><a href="https://www.lesson5.info/?p=10">875日。</a></li>
	</ul>
</div><!-- / #relate_post -->
</body>
</html>

プラグインの動作バージョンによってコードの折り返しの有無が選べるようです。
とにかくこれで簡単にコードが載せれるようになったのでうれしいです。

対応コード

対応しているコードは以下のようです。

html,actionscript3,bash,coldfusion,cpp,csharp,css,
delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,
matlab (keywords only),objc,perl,php,text,powershell,
python,r,ruby,scala,sql,vb,xml

Tagged with: plugin