【Ruby】Gem「Redcarpet」のソースコード表示に行番号を追加する

前回紹介したRubyGem「Redcarpet」のつづきです。

osio-tosimasa.com

Markdown内にソースコードを埋め込むとGoogle code-prettify用のHTMLを書き出してくれるのですが、行番号を表示するオプションがなかったので、カスタムした事例の紹介です。

試した環境はこちらです。

Ruby 3.2.0
Redcarpet 3.6.0

カスタム用クラスを作成する

まずは独自のHTML生成するためのカスタム用クラスを作ります。やりたいこととしてはlinenumsというオプションをつけたいだけです。それ以外は元々生成してくれるコードとほぼ同一です。#{code}のところはHTMLエスケープしてあげたほうがいいのかもしれません。

class MyCustomRenderHTML < Redcarpet::Render::HTML

  def block_code(code, language)
    "<pre><code class=\"prettyprint linenums lang-#{language}\">#{self.escape(code)}</code></pre>"
  end

  def escape(string)
    string.gsub(/['&\"<>\/]/, {
      '&' => '&amp;',
      '<' => '&lt;',
      '>' => '&gt;',
      '"' => '&quot;',
      "'" => '&#x27;',
      "/" => '&#x2F;',
    })
  end

end

カスタムクラスを使ってHTML出力する

最低限必要な記述は以下の通り。optionsのprettifyはOFFに、extensionsのfenced_code_blocksはONにします。ONにしておかないと、カスタムクラスで定義したblock_codeが呼び出されません。

    options = {
      prettify: false
    }

    extensions = {
      fenced_code_blocks: true
    }

    renderer = MyCustomRenderHTML.new(options)
    markdown = Redcarpet::Markdown.new(renderer, extensions)
    markdown.render(content)

おわりに

余談ですが、Markdown形式でテキストを保存するのが好みです。見出しやリストなど適度に文書内を書式化できるのが便利ですね。

他人様に見せるときはRedcarpetのようなHTML変換ツールがあると、Markdownで保存しておくメリットが広がりますね。 ただHTMLだけだと見た目が寂しいのでCSSを使っておしゃれに飾り付けしたいところです。その辺はまた次回にでも。