Stingerにソースコードを表示する『Highlight.js』を実装しました

カスタマイズで必至のソースコード表示

ブログがある程度落ち着いてきたらレイアウトやデザインを変更するカスタマイズに挑戦したくなりますよね。このブログもたくさんのStingerブログを参考にさせて頂いて今のデザインに落ち着きました。

HtmlやCSSの知識がない初心者でも、アップされているソースコードを参考にすれば、デザインのカスタマイズができます。ソースコードを表示しているブログにはいろいろと(勝手に)お世話になりました。

このブログではカスタマイズ系の記事を取り扱わないのですが、記録用として、これまで参考にさせて頂いたブログへの恩返しを兼ねて、ソースコードを表示していきたいなと思うようになりました。こういうやつですね。

.appinfo {
border: 3px solid #001D87;
width: 100%;
margin-bottom: 10px;
overflow: auto;
background: url(images/stripe2.png) repeat;
}

今回はソースコードを表示する機能を導入するまでの流れを書きたいと思います。

表示するライブラリを選択しよう

ソースコードを表示する代表的なライブラリには、プラグインで実装する「WP Code Prettify」と「SyntaxHighlighter」、必要ファイルを直接書き込む「Highlight.js」と「Google Code Prettify」があります。

色々と試した結果、最終的に「Highlight.js」を使用することにしました。

軽量であること、使用が簡単なこと、好みのデザインがあること、機能が少なくていいことが決め手でした。使用する環境や条件によっては他の利用を検討してみるのも全然ありだと思います。

ちなみに「Google Code Prettify」を実装するときはこちらがとても参考になりました。

ここでは僕が利用しているHighlight.jsの実装するまでの流れを紹介したいと思います。

Highlight.jsの実装の方法

参考にさせて頂いた記事がこちら。
こちらよりコードを引用し、変更を多少加えて実装しています。

必要ファイルをダウンロードする

まずhead.phpファイル内に必要ファイルを読み込む必要があります。ファイル先をリンクを指定して読み込むことができますが、僕の場合スタイルシートに変更を加えたかったので、CSSファイルをダウンロードしてサーバーから直接読み込むことにしました。

Highlight.jsのファイルはこちらからダウンロードできます。

記述する言語を選択します。僕が使用するのはブログ内のソースぐらいなので、CSS、Html、JavaScript、PHPをダウンロードしておきました。zipファイルを解凍したら中にたくさんのテーマが確認できると思います。

head内に記述する

ブログの記事で読み込むようhead.phpのhead内に以下のソースを書き込みます。

<link rel="stylesheet" href="/tomorrow-night.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>

tomorrow-night.cssとはテーマの1つです。お気に入りのデザインがあればこのファイル名を変更します。hrefにはファイルがあるパスを指定します。僕の場合はStinger3のテーマ内に直接放り込んでいるのでこちらになります。

<link href="<?php echo get_template_directory_uri(); ?>/tomorrow-night.css" type="text/css" rel="stylesheet" />

 コードを省略する

上の記述だけで、ブログの記事に<pre>と<code>を使用してハイライト表示ができるようになりますが、2つのタグを使用しないといけないので、省略するために追加コードをhead内に埋め込みます。このブログのheadだとこうなります。

<link href="<?php echo get_template_directory_uri(); ?>/tomorrow-night.css" type="text/css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script>
$(function(){
$('pre').addClass('highlight');
$(".highlight").each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>

これで<pre></pre>で囲むだけでソースコードの表示ができるようになりました。参照元ではJavascriptの記載がされていますが、表示されない場合に記事内に書けばよいかと思います。

スタイルシートを調整する

スタイルシートはtomorrow-night.cssを利用し、そこに少し修正を加えています。ポイントはポップなフォントと、border-radiusの角丸です。あとはお好みで各タグの色を変更したら完了です！

.hljs {
font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
font-size: 13px;
display: block;
overflow-x: auto;
background: #2d2d2d;
color: #cccccc;
padding: 15px;
border-radius: 5px;
-webkit-text-size-adjust: none;
}

ひとこと

テーマ名、和訳をしたら「明日の夜」。

合わせてこちらもどうぞ：

HTML&CSS標準デザイン講座 【HTML5&CSS3対応】

posted with カエレバ

草野 あけみ 翔泳社 2013-03-12

Amazon

楽天市場