iT邦幫忙

DAY 27
1

從想法到快速實作的捷徑:Rails系列 第 27

[ Day 27 ][ Dev ] 簡單的支援Markdown

  • 分享至 

  • xImage
  •  

(坦白說我覺得沒有支援markdown是一件痛苦的事情。)

當我們從資料庫把po文抓出來時需要把'\n'換成 <br>

<%= raw @post.content.gsub(/\n/, '<br/>') %>

看到這種東西心裡除了不舒服之外,還覺得很蠢,

通常我會先把它抽出來放進helper裡面。

不過現在有個更棒的選擇:

如果支援markdown的話,換行什麼的都不用再擔心了。

(這個理由真的有夠牽強)

重點是支援markdown後,能讓編輯的人寫出(視覺上)更有架構的文章,

自從在github上寫readme用過markdown之後,

我連自己上課或聽演講的筆記都改用markdown的語法來寫XD

關於markdown,可以來這個連結看一下怎麼寫: http://markdown.tw/

想要實作有支援簡單markdown的功能在rails裡面相當簡單,

因為我們現在有了redcarpet這個gem,

基本上可以直接拿來用XD

因為在united-issues這個project裡面並不會需要幫code上色。

其他還有很多可以客製化的地方,有興趣的可以到github去看看。

現在就來簡單介紹一下想在project裡面支援markdown是多麽簡單。

gem 'redcarpet'

加入gem後,到application_helper.rb裡面新增一個helper method:

def simple_format(text)
    options = {hard_wrap: true, filter_html: true, autolink: true, no_intraemphasis: true}
    markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, options)
    markdown.render(text).html_safe
end

再把剛剛的:

<%= raw @post.content.gsub(/\n/, '<br/>') %>

換成

<%= simple_format @post.content =>

就能在編輯文章的時候使用markdown語法,太神啦~

這裏來小小解釋一下這些選項是在幹什麼。

hard\_wrap: 就算是在同一個文章分行也會有用(也就是user輸入幾個enter就會照實換幾行),沒有加這個選項的話markdown會自動忽略。

**filter\_html**: 過濾掉危險的html選項,user永遠是邪惡的~

**auto\_link** : 在文章裡貼上連結後,會自動轉乘anchor tag

**no\_intraemphasis** :

這個要稍微解釋一下markdown的語法。如果我們輸入\_a\_,redcarpet會在anchor tag外面加上&lt;em> &lt;/em>

但是如果今天他是要輸入一個email: tiny_denny_oh@gmail.com,就會變成tiny&lt;em>denny&lt;/em>oh

這可不是我們想要的結果啊!

所以加上這個選項之後會自動幫我們避免掉這個情形,讓底線不要發揮他不該有的功用。

  def simple_format(text)
    options = { hard_wrap: true, filter_html: true, autolink: true, no_intraemphasis: true}
    markdown = Redcarpet::Markdown.new(Redcarpet::Render::HTML, options)
    markdown.render(text).html_safe
  end

redcarpet的裡面還有其他選項可以玩,

有興趣的人真的可以自己開一個project來試試看!

參考資料:

https://github.com/vmg/redcarpet


上一篇
[ Day 26 ][ Dev ] 上傳圖片 - Carrierwave
下一篇
[ Day 28 ][ Dev ] Facebook登入
系列文
從想法到快速實作的捷徑:Rails30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
kevin3372000
iT邦新手 3 級 ‧ 2014-10-28 19:55:29

為什麼要把 \n 換成 <br> 啊?XDDD

今天就算不用 markdown ,使用一般的所見即得編輯器,送到 Backend 的時候照理講是純 HTML 才對啊XDDD

0
tinydenny
iT邦新手 4 級 ‧ 2014-11-12 12:28:58

真的假的@@
我在rails console看是\n欸

我要留言

立即登入留言