Ruby/Rouge でコードをシンタックスハイライトした HTML と CSS を出力させる
Ruby コードを HTML化して、ついでにシンタックスハイライトもできるようにできないか、やってみました。
画像だとこんな感じです。全体はこういう風です。
RubyGem 'rouge' というものを使いました。インストールはふつうに $ gem install rouge とかBundler でどうぞ。
とりあえず HTML と CSS を吐かせるのにかなり苦労しました。上の HTML, CSS ファイルはこんなコードで出力しています。
rouge_sample.rb
require 'rouge' source = File.read('oekaki_sample16.rb') formatter = Rouge::Formatters::HTML.new lexer = Rouge::Lexers::Ruby.new html = formatter.format(lexer.lex(source)) css = Rouge::Themes::ThankfulEyes.render(scope: '.highlight') html1 = <<EOS <!DOCTYPE html> <html lang="ja"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Syntax-Highlight</title> <head> <link rel="stylesheet" type="text/css" href="rouge_sample1.css"> <style type="text/css"> pre.highlight { font-family: Liberation Mono, Consolas, monospace, sans-serif; font-size: 86%; padding: 10px; line-height: 1.1em; } </style> </head> <body> <pre class="highlight"> EOS html = html1 + html + "</pre>\n\n</body>\n</html>" open("rouge_sample1.html", "w") {|io| io.write(html)} open("rouge_sample1.css", "w") {|io| io.write(css)}
色の付け方は Rouge::Themes::ThankfulEyes
のところで指定しています。ここでは ThankfulEyes を選んでいますが、Colorful, Github など、いろいろ選べます。詳しくはこちらを見て下さい。
また、表示させるソースの種類はRouge::Lexers::Ruby.new
で指定しています。これなら Ruby ですね。他のものはこちらを見て下さい。たいていのものはあるのではないでしょうか。