Tumblrのカスタマイズ　コードをハイライトさせるgoogle-code-prettifyを設置してみた

カスタム, サイト作成

【この記事を読むのに必要な時間は約 4 分です。】

コードをハイライト表示させるものとして、このブログではSyntaxhighlighter系プラグインのWP-Syntaxhighlighterを使っている。
Tumblrは画像中心で活用しているので、ハイライト表示は基本必要ないが、使う人もいるであろうということで設置の簡単なgoogle-code-prettifyを利用してみた。設置方法を説明したい。

google-code-prettifyのページ

こちらがgoogle-code-prettifyのページ。今回は、必要最低限の設置にするため、ホスティングサービスを利用し、ファイル自体のダウンロード/サーバーへのアップロードは利用していない。

google-code-prettifyの設置

必要ファイルの呼び出し

基本的にヘッダー部分（<head>～</head>の間）へ記載するだけである。
まずは、次のファイルをホスティングを利用して呼び出すための記載をする。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link rel="stylesheet" href="https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" charset="utf-8">

スタイルを設定

上記同様、ヘッダー部分（<head>～</head>の間）に上記に続けて以下のように記載する。

<style>
pre.prettyprint	{
        overflow:scroll; ←枠に収まらない時の処理
	background-color: rgb(248, 248, 248);
	color: gray;
	margin:20px 0px 20px 0px;
	font-family:"メイリオ", Meiryo; ←文字を見やすくする
	font-size:13px;
	}
pre.prettyprint strong {
	background-color:yellow; ←強調したいコードに使用する
	}
ol.linenums li {
	list-style: decimal outside;
	line-height:; ←行間に使うものだが、任意でよし
	border-left: solid 3px #6CE26C;
	padding-left: 10px;
	margin-left: 10px; ←行番号の位置、実際に見て調整が必要かも
	background-color: white;
	}
ol.linenums li.L1,ol.linenums li.L3,
ol.linenums li.L5,ol.linenums li.L7,ol.linenums li.L9 {
	background-color: rgb(248, 248, 248)
	}
</style>

注意事項

run_prettify.jsファイル

今回はrun_prettify.jsファイルを呼び出しているので、以下の変更は必要ない。run_prettify.jsファイルに代えて、prettify.jsファイルを呼び出す場合は、ボディタグを以下のように変更する。

<body>を以下のように変更する
<body onload="prettyPrint()">

コードが枠をはみ出す場合の処理

コードが1行では長すぎる場合、overflowの処理をしないとはみ出してしまう。個別に処理したいので、ハイライトしたいもの毎にスタイル設定をした方が良いと思ったが、何故かTumblrでは個別にスタイル設定できなかったので、上記の「スタイルを設定」で入れ込んでいる。 

本当は、個別に以下のようにしたかった。
<pre class="prettyprint linenums" style="overflow:scroll">
そこでスタイルの設定で
pre.prettyprint	{
        overflow:scroll; ←枠に収まらない時の処理
としている。

google-code-prettifyの利用方法

これで準備はできたので、後は、利用したい部分に以下のように記載する。

<pre class="prettyprint linenums:1">
ここにハイライトしたい部分を記載する。
</pre>

行番号の表示

上記のlinenumsは行番号を表示したい場合。横の数字は開始番号。

実際の表示

私のTumblrで実際に利用したのが、以下。

tumblrgoogle

なお、Tumblrのテキスト投稿でgoogle-code-prettifyを利用することになるだろうが、以下のように「html」で編集利用すること。

3tumblrgoogle

以上