プログラムコードのタグをカラーリングするJSとして、有名なのがSyntaxhightlighterとGoogle-code-prettifyです。このサイトではスペースが表示出来て、コピペが楽なGoogle-code-prettifyを利用します。プログラム本体の設定方法とWPで使うためのショートコードを作ってみます。

基本的な使い方

JSを読み込みます。本体のプログラムはgoogleでCDNにありますので、読み込みます。細かい使い方はgitにあるのでみてください。スキンを変えることでテイストをサイトに合わせることが出来ます。このサイトで利用しているのはsons-of-obsidianです。

https://github.com/google/code-prettify

<script type="text/javascript" async="async" src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
<pre class="prettyprint lang-css">  body{
    font-size:10px;
  }
</pre>
ソースコード装飾ならGoogle code prettify

※WPエディタのタブをビジュアルにすると自動で整形を行います。
テキストエディタでスペース入れても、ビジュアルエディタに切り替えたタイミングで削除されます。
WP管理画面>ユーザーの設定でビジュアルエディタの使用を停止することができます。

ショートコードの設定

//JSの登録
wp_register_script('prettifier', '//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian', array('jquerya'), null, true);
//JSの呼び出し
wp_enqueue_script('prettifier');
//関数
function mycode($atts, $content = null) {
$atts = shortcode_atts(array(
'lang' =&gt; '',
'file' =&gt; '',
), $atts, 'bartag');
$pattern = "/\<br(\s+\/)?&gt;|\<p\&gt;|<\/p&gt;/i";
$content = preg_replace($pattern, "", $content);
$content = htmlspecialchars($content);
$file = $atts['file'];
$lang = $atts['lang'];
$return = '
<div>
<pre class="prettyprint linenums lang-'.$lang.'">'. $content. '</pre>
<span class="file">'. $file. '</span>
</div>
';
return $return;
}
//実行
add_shortcode('code', 'mycode');
functions.php
ソースコード装飾ならGoogle code prettify

langにcssやjsなどcode-prettifyで指定された言語設定を追加します。
fileにファイル名を入れるとわかりやすいです。