稍微摸摸 Redcarpet

一直想要自己弄弄看 Markdown 轉 HTML 這樣的功能，
今天就抽空摸了一下了

Redcarpet

• GitHub - https://github.com/vmg/redcarpet
• RubyGems - https://rubygems.org/gems/redcarpet

稍微查了一下，這個是比較多人推薦的，
可以用很簡單的方式、達成轉換成 HTML 這個目的。

雖然這個 library 有其他更強大的功能 - 例如客製化自家用的 Markdown 標記，
但是這篇只會寫怎麼簡單地使用它。

範例的流程

環境

• ruby 2.3.2
• Rescarpet 3.4.0

步驟

• 安裝 Redcarpet
• 在 ruby 檔案引入
• 透過 command line 執行，匯出成 html
• 稍稍加強功能

安裝

$ gem install redcarpet

這樣就完成了

撰寫檔案

這時候可以開一個自己喜歡的資料夾，新增一個 ruby 檔案，
作為示範，就把檔案叫 demo.ruby 吧！

接著就可以先在這個檔案引入 redcarpet

demo.ruby

require 'redcarpet'

初始化 Redcarpet 的 Markdown 物件

我們可以透過

Redcarpet::Markdown.new(<renderer>, <extensions>)

這樣的方式初始化一個負責 Markdown 處理的物件

第一個參數 renderer 可以放入 Redcarpet::Render::Base 的子類別 render object
像這邊就可以放 Redcarpet::Render::HTML ，因為他是繼承於前面講的 Base （參考）。

第二個參數 extensions 則是可以放入各種會需要指定的 extensions ，例如 :autolink、:highlight 等進階功能。

基本的成果

demo.ruby

require 'redcarpet'


renderer = Redcarpet::Render::HTML
# 如果不需要使用 extension 的話，可以這樣寫來初始化
markdown = Redcarpet::Markdown.new(renderer)

# 印出一個 markdown 字串轉換後的結果
puts markdown.render("# This is title \n http://qiita.com")

輸出

輸出成字串

ruby demo.ruby

存檔之後，在 command line （終端機畫面中） 用 ruby 的執行，就會印出

<h1>This is title</h1>

<p>http://qiita.com</p>

把結果存入 html 檔案

ruby demo.ruby > index.html

用這樣的指令，就可以把印出的結果存進 index.html 這個檔案中。

基本成果截圖

用瀏覽器打開輸出的檔案之後，就會看到這樣的畫面：

==

==

因為預設的 Markdown 是沒有辦法自動處理 URL 字串的，所以就算打出網址，處理後的結果這個部分還是字串。

加入自動轉換網址字串的 Extension

可以用 :autolink 這個 extension 來幫我們達成自動轉換網址字串的功能

demo.ruby

require 'redcarpet'


renderer = Redcarpet::Render::HTML
extensions = { :autolink => true }

# 將 extension 加入初始化
markdown = Redcarpet::Markdown.new(renderer, extensions)

puts markdown.render("# This is title \n http://qiita.com")

輸出成字串

<h1>This is title</h1>

<p><a href="http://qiita.com">http://qiita.com</a></p>

HTML 檔案的結果

ruby demo.ruby > index.html

接著，在執行一次存成 index.html，
用瀏覽器開啟之後，就會看到這樣子的畫面：

==

==

就會看到有網址的地方，已經變成可以點擊的超連結了。

這篇到這邊告一個段落，再來繼續摸摸 Redcarpet 的其他功能！