はてなブログのシンタックス・ハイライトをカスタマイズ

preタグ内のコメント行やプロンプトをハイライト

はてなブログにあるソースコードなどを色付けして表示するスーパーpre記法。端末で扱うコマンドやコマンドの出力など、ソースコード以外にもよくファイルタイプを指定しないで使う。

 # はてな記法
 >||
 $ gcc --help
(出力結果)
 ||<

 # markdown記法
 ``` 
 $ gcc --help
 (出力結果)
 ```

下記の要素をハイライトしたい。

• コメント行 (先頭が # から始まる行)
• プロンプト (先頭の $)

出来た。

# gcc のヘルプを表示
$ gcc --help
(出力結果)

ソースコード

「フッター」に貼り付けてください。

<script type='text/javascript'>
  var pre = document.querySelectorAll('pre[data-lang=""]')
  for (var i=0; i < pre.length;i++){
    var s = pre[i].textContent;
    s = s.replace(/(^#.*$)/gm, "<span class='cmt'>$1</span>");
    s = s.replace(/(^\$)/gm, "<span class='pmt'>$1</span>");
    pre[i].innerHTML = s;
  }
</script>

「デザインCSS」に貼り付けてください。

pre .cmt {
  color: #8f5902;
  font-style: italic;
}
pre .pmt {
  color: #3b658c;
}