WordPressで「google-code-prettify」を使いたい

公開日： 2014/05/21 : Wordpress Google, wordpress, ソースコードハイライター

google-code-prettifyはGoogleから提供されるソースコードハイライターです。

ソースコードハイライターと言うと「syntaxhighlighter」が有名ですね。

今回は設置が簡単な「google-code-prettify」を利用します。

■Wordpressテーマの編集からheader.phpを選んで、<head>タグ内に以下のJSタグを追加します。（編集するファイルはテーマによって適したファイルを編集します）
<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
■デフォルトのままだと行番号が5飛びのためCSSを追加して調整します。

再びWordpressテーマの編集へ進み、style.cssの末尾に以下のCSSを追加します。
/** * google-code-prettify */ .prettyprint { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .prettyprint ol { padding-left: 40px; } li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: decimal; }

■ソースコードを表示するには以下の様に記述します。
<pre class="prettyprint lang-html linenums:1"> ここにソースコードを記述。 </pre>

prettyprint lang-xxx の箇所には言語を指定します。（C, friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefilesなど）

linenums:X の箇所は開始行番号です。（省略可）

■記述例

<script type="text/javascript">
		var __lc = {};
		__lc.license = ********;
(function() {
		var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
		lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
		})();
</script>

photo by Thomas Leuthard