はてなブログでソースコードをハイライト表示する方法
だいぶ更新が久しぶりになってしまいました。最近は、同時期に立ち上げた別のブログにかかりっぱなしです。ぼちぼちこのブログにも手をかけて行きたいと思っております。
今日は、Web開発系のブログでよく見かける、ソースコードをハイライト表示させる方法について書きたいと思います。
はてなブログには標準でハイライト表示させる機能がある
シンタックス(構文)をハイライト表示するってやつです。
はてなブログで文章を書くモードを、
- 標準(みたまま)&HTML
- マークダウン記法
- はてな記法
以上の3つの編集の仕方から選択することができます。
このうち、マークダウン記法と、はてな記法ではシンタックスハイライトの機能が標準で搭載されています。
見たままモードでシンタックスハイライトさせたい
私のように、見たまま&HTMLモードでブログを書いている人には、シンタックスハイライトの機能は提供されていません。
シンタックスハイライトを導入したければ、カスタマイズしたり、外部サービスを使ったりする必要があります。
やろうと思ったら、いろいろ調べて、試行錯誤するはめになったので、シンタックスハイライトができるようになるまでの経緯をメモしておきます。
SyntaxHighlighterを使う方法
はてなブログ以外で、開発系ブログを書いている人は、どうやってるのかなーと、調べてみると、「SyntaxHighlighter」というスクリプトを使っている人を発見。
どうやら、結構メジャーなスクリプトのようです。
以下のサイトから、最新版の「SyntaxHighlighter」をダウンロードします。
ダウンロードできるのは、ZIPファイルです。
ZIPファイルを解凍すると、いくつかのディレクトリが中に入っています。
JavaScriptやCSSのソースが入っているのですが、基本的にはこの中から必要に応じてサーバーにアップロードして利用します。
面倒なことに、はてなブログには、外部ファイルをアップロードする機能がないのですよね。
CSSは直接書き込むとしても、JavaScriptのファイルは外部のサーバーに置く必要がありそうです。
やり方を解説しているサイトはいくつか見つけましたが、できればはてなブログだけで完結させたい。。
はてなブログでSyntaxHighlighterを使う - pachipachi note
はてなブログでSyntaxHighlighterを使ってみた。 - fenriswolf's blog
SyntaxHighlighterを使うメリットとしては、CSSで見た目をカスタマイズできることですね。
Gist貼り付け機能を使う方法
これは、はてなブログが提供しているGist貼り付け機能を使う方法です。
見たままモードでやるなら、これが正攻法かもしれません。
今回はこの方法でやってみたいと思います。
Gistとは、GitHubが提供しているコードの共有サービスのことです。
GitHubとは、世界中のプログラマーが利用しているシステムを開発する際に便利に使えるサービスなんですが、あまり深入りする必要はないかと思います。
Gistでコードを管理しておくと、
- コードのバージョン管理ができる
- 他の人がコードを利用できる
- ブログ等に貼り付けができる
というメリットがあります。
もともと開発者向けのサービスなので、ブログにコードを貼り付けるためだけじゃなく、便利に使えそうですね。
はてなブログだけで完結させたいさせることはできませんが、この機会に今後使っていこうかなと思っています。
Gistを使うには、GitHubのアカウント登録が必要です
Gistは、GitHubのサービスの一つなので、GitHubのアカウントを作成すると使えるようになります。
アカウント登録のやり方は、このサイトが分かりやすかったです。
さらに使い方を掘り下げたい方は、このサイトを読み進めると良いのではないでしょうか。
GitHubにログインすると、トップページはこんな感じです。
赤丸の部分のリンクをクリックするとGistに移動します。
Gistでソースコードを書いてはてなブログに表示してみる
Gistの使い方はこちらのサイトが分かりやすく解説してます。
はてなブログでGistのコードを表示させる時の注意点としては、一般公開で登録したファイルでないと、連携させられないという点でしょうか。
記事作成画面の左側サイドバーからGist貼り付けを選んで、
連携するユーザー名を入れるところに、GitHubのアカウント名を入れます。
一般公開しているGistのファイルがあれば、それが表示されますので、簡単にブログに貼り付けることが出来ます!
できましたーー!
見たままモードの編集画面ですと、GistのURLが表示されるだけですが、プレビューで見ればちゃんとソースコードが表示されているのが確認できます。
詳しいやり方はこちらを参照してみてください。