Ruby/Rouge でコードをシンタックスハイライトした HTML と CSS を出力させる

Ruby コードを HTML化して、ついでにシンタックスハイライトもできるようにできないか、やってみました。
20180903012354
画像だとこんな感じです。全体はこういう風です。

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 ですね。他のものはこちらを見て下さい。たいていのものはあるのではないでしょうか。