Ruby | redcarpet gemでmarkdownからHTMLを生成する

概要

redcarpet gemでmarkdownからHTMLを生成する

詳細

redcarpet gemでmarkdownからHTMLを生成します。

準備

・redcarpetをインストール

gem i redcarpet

・動作確認用にGitHub形式のcssをgithub.cssという名前で作成。元ネタはここで。
https://gist.github.com/andyferra/2554919

・syntax highlightの動作確認用にhighlight.jsを取得
http://highlightjs.org/download/
上記URLのチェックボックスで必要なもののみチェックしてzipをダウンロードをする。
取得したzipを解凍してstyleディレクトリとhighlight.pack.jsをHTMLと同一階層ディレクトリにコピー。

今回はRubyだけ取得しました。
取得したsyntax highlightを適用する場合は、下記のコードをHTMLのheadに追加します。

<link rel="stylesheet" href="styles/default.css">
<script src="highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

サンプルコード

# encoding: utf-8
require 'redcarpet'

HEADER = <<-EOS
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="github.css">
  <link rel="stylesheet" href="styles/default.css">
  <script src="highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
EOS

FOOTER = <<-EOS
</body>
</html>
EOS

markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, 
  autolink: true,
  tables: true,
  fenced_code_blocks:  true,
  highlight:           true,
  )
html = markdown.render <<-EOS
# head1
## head2
### head3

| header | header | header | 
|:--:|:--:|:--:|
|column|column|column|
|column|column|column|
|column|column|column|

~~~ruby
class Hoge
  def hoge
    "hoge"
  end
end
~~~

~~~bash
echo hoge
pwd
ls
find . -name *.rb | xargs grep "hoge"
~~~

* list
* list
* list

1. numbered list
1. numbered list
  1. numbered list
  1. numbered list
1. numbered list

*italic*
**bold**
EOS

File.open("sample.html", "w:utf-8") { |f|f.print HEADER + html + FOOTER}

生成HTML（ソース）

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="github.css">
  <link rel="stylesheet" href="styles/default.css">
  <script src="highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>head1</h1>

<h2>head2</h2>

<h3>head3</h3>

<table><thead>
<tr>
<th style="text-align: center">header</th>
<th style="text-align: center">header</th>
<th style="text-align: center">header</th>
</tr>
</thead><tbody>
<tr>
<td style="text-align: center">column</td>
<td style="text-align: center">column</td>
<td style="text-align: center">column</td>
</tr>
<tr>
<td style="text-align: center">column</td>
<td style="text-align: center">column</td>
<td style="text-align: center">column</td>
</tr>
<tr>
<td style="text-align: center">column</td>
<td style="text-align: center">column</td>
<td style="text-align: center">column</td>
</tr>
</tbody></table>

<pre><code class="ruby">class Hoge
  def hoge
    &quot;hoge&quot;
  end
end
</code></pre>

<pre><code class="bash">echo hoge
pwd
ls
find . -name *.rb | xargs grep &quot;hoge&quot;
</code></pre>

<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>

<ol>
<li>numbered list</li>
<li>numbered list

<ol>
<li>numbered list</li>
<li>numbered list</li>
</ol></li>
<li>numbered list</li>
</ol>

<p><em>italic</em>
<strong>bold</strong></p>
</body>
</html>