概要
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 "hoge" end end </code></pre> <pre><code class="bash">echo hoge pwd ls find . -name *.rb | xargs grep "hoge" </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>