blogにソースコードを載せる（SyntaxHighlighter編）
はてなブログでソースを掲載する方法の検討という事でここまで、はてなのシンタックス・ハイライト、Gistと試してきました。
最後は恐らく技術ブログを書いている人達の中ではもっとも有名と思われるSyntaxHighlighterです。
- はてなのシンタックス・ハイライト
- Gist
- SyntaxHighlighter
はてなブログでSyntaxHighlighterを使える様になるまでの手順は、正直他の2つに比べて非常に手間です。
先人の方々のブログを見させて頂きながら設定を行ったんですが、それでもなおハマりました・・・orz
そんなハマり所も交えながら、手順を紹介したいと思います。
SyntaxHighlighterとは
Alex Gorbatchevさんが作成したJavaScriptのライブラリで、プログラムソースコードをブログ等に掲載する際に読みやすく表示してくれるライブラリです。
対応しているプログラム言語はJava、Ruby、C#、C++、etc...と色々あります。
また、適用させる表示スタイルもEclipse風とか、Emacs風とかにも出来たりします。
SyntaxHighlighterをはてなブログへ適用させる手順
手順は以下の様な順で実施していきます。
- ライブラリ(ver3.0.83)の入手
- はてなブログへのスタイル(Eclipse風)適用
- はてなブログへのライブラリ(Java/JavaScript用)適用
- ブログ記事の書き方
ライブラリ(ver3.0.83)の入手
ライブラリの入手方法は2つあります。
どちらの方法で入手してもらっても問題ないと思います。
SyntaxHighlighterの公式サイトからの入手
以下のサイトから、ライブラリをダウンロードしてください。
SyntaxHighlighter公式サイト
SyntaxHighlighterのGitHubリポジトリからの入手
以下のGitHubから、cloneしてください。
SyntaxHighlighter GitHubリポジトリ
#git cloneコマンド git clone --depth=1 -b 3.0.83 https://github.com/syntaxhighlighter/syntaxhighlighter.git
はてなブログへのスタイル(Eclipse風)適用
ダウンロードしたライブラリの中にあるCSSファイルをはてなブログへ適用します。
適用するのは以下の2つのCSSファイルです。
styles/shCore.css どのテーマを使う場合でも必須
styles/shThemeEclipse.css
※Emacs風にしたい場合は、shThemeEmacs.cssを使用してください。
こだわりが無い場合は、shThemeDefault.cssを使用してください。
適用方法は、上記のCSSファイルをそれぞれテキストエディタなどで開いてコピーして、はてなブログのダッシュボードから設定します。
ダッシュボード > デザイン > カスタマイズ > デザインCSS を開いて二つのCSSファイルの中身を貼り付けてください。
貼り付けが終わったら、保存すればスタイルの適用は終了です。
はてなブログへのライブラリ(Java/JavaScript用)適用
お次は、ライブラリの方を適用させます。
手順は、スタイルの時と同様に必要な物を選んではてなブログ上へ貼り付けて設定します。
ここではJavaとJavaScriptのライブラリを設定します。
scripts/shCore.js どの言語を使用する場合でも必須
scripts/shBrushJava.js
scripts/shBrushJScript.js
スタイルと同様にダッシュボードから設定します。
ダッシュボード > デザイン > カスタマイズ > サイドバー > + モジュールの追加 > HTMLを開きます。
入力欄ウィンドウが表示されますので、そちらにまず以下を手動で入力。
<script type="text/javascript"> ここに3つのファイルの中身を貼り付ける SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
3つのJSファイルの中身を貼り付けてください。
こちらも貼り付けが終わったら、保存をすればライブラリの適用も終了です。
ブログ記事の書き方
スタイルの適用、ライブラリの適用が完了すればSyntaxHighligterを使用する準備は完了です。
さっそく、ブログ記事にソースコードを載せてみようと思います。
記述方法
<pre data-unlink="" class="brash:java" title="SyntaxHighligterを使用したJavaコード(Eclipse風)">
ここにソースコードを記述
</pre>
※はてなブログの有料会員の方についてはdata-unlink=""は省略してみ大丈夫です。
表示例（Java/Eclipse風）
public class Hoge {
parivate static final String HOGE_ID = "hogeID-001";
/** hoge1 */
private String hoge1;
/**
* デフォルトコンストラクタ
*/
public Hoge() {
this.hoge1 = HOGE_ID;
}
// hoge1を返却
public String getHoge1() {
return this.hoge1;
}
}
2015/05/28追記
現在はSyntaxHighlighter用jsの設定をOFFにしている為、ハイライト表示されません。
で、最初にも書きましたがここまで辿りつくのにハマりポイントがありました・・・・
まとめに入る前にそのハマりポイントを紹介したいと思います(´・ω・`)
ハマりポイント
実はこの手順を試す前に、別の方法でも試していました。
その手順というのが、貼り付けたスタイルやライブラリを作者のAlex Gorbatchevさんが公式サイト上へUPしている物を直接使っちゃおうぜ！的なノリの方法なんですが、これがマズかった・・・・
やり方としては、上記のライブラリ適用の時に設定したサイドバーへのHTMLモジュール追加と同じなんですが以下の様な内容を記述します。
<link rel="stylesheet" type="text/css" href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css"> <link rel="stylesheet" type="text/css" href="http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeEclipse.css"> <script type="text/javascript" src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js" /> <script type="text/javascript" src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJava.js" /> <script type="text/javascript" src="http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushJScript.js" /> <script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.all(); </script>
設定して暫くの間は、これで問題なかったんですが色々試しながらページを再表示させていると急に動作が重くなりました・・・。
その上、なぜか正常に表示されなくなる始末・・・orz
あれやこれやと、設定方法とか変えながら試したんですが何度やってもちゃんと表示されません・・・。
数時間格闘ののち、ふと公式サイトを表示してみた所・・・・・
(´・ω・`)
まとめ
- わかってみれば簡単だったんですが、準備がすごく大変だった・・・・
- 思ってた程、表示が遅いわけではなかった
- 色分けについては、他二つと比べても一番好み（Eclipse Love!!!）
- 行番号も万全
- 手間を惜しまなければ、スタイルを自分でカスタマイズ可能
- 上記のJavaコードを見るとわかると思いますが以下の点が残念すぎる・・・・
- HTMLタグが書けない、、、
<br>みたいな書き方でなく、<br>こう書く必要がある- 書きたい言語が増える度に都度、ライブラリを適用するのが面倒・・・
- プレビュー表示の段階ではどの様に表示されるかがわからない・・・
参考にさせて頂いた先人の皆様のサイト
先人の皆様、本当に有り難うございました(´・ω・`)
