読者です 読者をやめる 読者になる 読者になる

Saneyan Notes

軌跡を残す

Hatena Blog で SyntaxHighlighter を使う

SyntaxHighlighter

 Hatena Blog ではてな記法を使わず、 SyntaxHighlighter でソースコードのシンタックスハイライトに対応させる方法を記しておく。

 

 Hatena Blog で、 JavaScript などのソースコードを記事に載せるだけでなくシンタックスハイライトしたい場合、はてな記法では >|javascript|~||< と表記すればよい。だが、はてな記法モードに設定すると HTML を直接編集できない。これでは細部に渡って編集したいときに編集できないではないか...。

 

 ということで、知る人ぞ知る SyntaxHighlighter をここで使わせてもらった。様々なWebサイトで重宝される理由もわからなくもない。結果論から言うと、使えた。下のようにうまく JavaScriptソースコードがシンタックスハイライトされてると思う。あえて不必要なコードも入れておいたが、これは確認目的でしかない。

var log = console.log;
var Person = function( name ){
  this.name = name;
};
Person.prototype.walk = function(){
  log( 'walking' );
};
var person = new Person( 'Taro' );
if( person instanceof Person ) person.walk();

 

 結果がわかったところで対応への手順を説明していく。ここでは、JavaScriptソースコードを対象としている。SyntaxHighlighter についての詳細な説明は省いているのでご了承を。

 

 その1。SyntaxHighter の必要なファイルを公式サイトからダウンロードする。

 

 その2。[デザイン]→[カスタマイズ]→[サイドバー]→[モジュールを追加]と移動した後、HTMLを編集できる箇所があるので、そこに先ほどダウンロードした shCore.js, shBrushJScript.js の各ソースコードをコピー&ペーストする。あと、scriptタグで包含するのを忘れないように。

 

 その3。その2でペーストしたコードの後に次のコードを付け足す。

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();

 

 その4。Hatena Blog は CSSの編集も可能なので、そこに shCoreDefault.cssスタイルシートをコピー&ペーストする。

 

 その5。[設定]に移動し、「見たままモード」になっているかどうかを確認。

 

 その6。[記事を書く]→[HTML編集]に移動し、次のような試し書きをする。ただし、[プレビュー]で外観を見ようとしても SyntaxHighlighter の効力は発揮されない。公開時の記事のみ適用される。

<pre class="brush: js">var test = "hello";</pre>

 

 以上で作業は完了。お疲れ様でした。