Blogger コードを見やすくする Google Code Prettify を自前サーバなしで使う。

ブログサイトに、HTMLやCSSのコードを掲載するのに、Syntax Highlighterをお使いの方も多いかと思います。その際、ファイルのアップロード先が必要になります。DropboxやGoogleサイトをアップロード先にしても良いのですが、自前のアップロードサーバなしで、BloggerにGoogle Code Prettifyを導入してみました。

どんなものかというと、

http://usagisaigon.blogspot.jp/

ブログでの、こうしたコード表示が、

http://usagisaigon.blogspot.jp/

こんな感じで、キレイに見やすくなるというものです。

Google Code PrettifyのGetting Startedページに、Auto-Loaderがあります。これを試してみます。

GettingStarted - google-code-prettify - Google Project Hosting

デフォルトスキン

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

「Blogger」→「テンプレート」→「HTMLの編集」→</head>タグの前にコードを追加します。「Ctrl」+「F」で、</head>を探すと早いです。

<pre class="prettyprint">
コード
</pre>

コードは<pre>タグで囲んで、HTML編集で該当するコンテンツ部分に追加します。また、ハイライトするコードは変換が必要です。

<→<
>→>

といった具合に変換します。

こんな感じです。スキンはシンプルで良いのですが、行番号が欲しいところです。変換処理は、Blogger使いには、お馴染みのクリボウさんのところで、お世話になりました。いつもお世話になっております。なお、こちらにBloggerウィジェットがあります。ここまで読んで、面倒だと思われた方は、クリボウさんのウィジェットがおすすめです。

コードをハイライトする「Code Prettify」ウィジェット | クリボウの Blogger Tips

行番号付き

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
</style>

行番号付きは、<style>タグを追加します。

<pre class="prettyprint linenums">
コード
</pre>

行番号を振るときはlinenumsを追加します。

こんな感じで、各行に行番号が振られました。

How can I put line numbers on every line instead of just every fifth line?

Sunburstスキン

CSSもかけられますが、テーマスキンがあります。これは、&→ &に変えるとうまくいきます。表示するときに、コード変換されてしまいますので、&とかは注意です。

<script src='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst'/></script>
<style>li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }</style>

Prettify Themes Gallery

Color themes

カラーデザインテーマ、Color themes for Google Code Prettifyがあります。こちらは、<link>タグを使い、CSSを追加します。

<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Tomorrow Night Blueというカラーテーマです。洒落ています。普通に追加しても良いのですが、URLを外部CSSとして試しました。

<link href='http://jmblog.github.io/color-themes-for-google-code-prettify/css/themes/tomorrow-night-blue.css' rel='stylesheet' type='text/css'/>
<script type='https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js'/></script>

Color themes for Google Code Prettify

今回使ったコード

<!-- Google Code Prettify -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style>li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }</style>

今回、使ったコードです。追加する場所は、</head>の前です。Google Code Prettifyは軽くて使いやすいです。

Pages