highlight.js を使ってサクッとコードをハイライト

phi phi on javascript

highlight.js 使えば言語も選ばず簡単にハイライトさせることができます.

highlight.js って?

  • JavaScript ライブラリ
  • HTML 中のコードを自動でハイライト
  • 言語を自動判定
  • 様々な言語, テーマに対応

使い方

html の頭にこれ書くだけ

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai.min.css">  
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>  
<script>  
window.addEventListener("DOMContentLoaded", function() {  
    hljs.initHighlightingOnLoad();
}, false)
</script>  

ちなみに css の monokai.min.css のところをこちらのどれかにすれば 対応したスタイルに変更されます.

あとは body タグ内で

{gfm-js-extract-pre-1}

とか書くとこんな感じで綺麗に表示してくれます.

highlight.png

Demo

昔は google-code-prettify 一択だったんですけどねぇ

Memo

これどうやってハイライトしてるんだろう? - http://alexpeattie.com/blog/better-syntax-highlighting-with-rouge/