*

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

wpid-Featured_Picture140-620x620

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

関連記事

ファビコン(favicon.ico)の作り方と設置のメモ

WEBサイト用のファビコン(favicon.ico)の作成と設置方法のメモ。 iPhone

記事を読む

wordpressに「Social Icons Widget」でソーシャルアイコンを表示

ワードプレスにSNSのリンクアイコンを表示するため、「Social Icons Widget」のプラ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 9badge @9badge
    WEB関連の情報を更新しています。ランニングやサイクリングのスポーツやアウトドアなど興味のあることも書いています。
    メール:contact[at]9gadge.com


Copyright© 9badge.com ,2014 All Rights Reserved.
WordPress-Theme STINGER3

PAGE TOP ↑