介紹

我們看到很多博客都支持降價。我們可以向任何支持降價的文章添加鏈接、圖像、視頻和 gif?？紤]內(nèi)容而不用擔(dān)心博客的呈現(xiàn)方式可以讓博主輕松制作出色的內(nèi)容。在使用 rails app 的 markdown 教程中，我們將實現(xiàn)一個博客應(yīng)用程序來編寫支持 markdown 的文章。Rails 中使用 Active Storage 來添加對上傳系統(tǒng)中存在的媒體（圖像、視頻和 gif）的支持，我們可以在本文中添加這些媒體?，F(xiàn)在，我們可以使用它們的 URL 添加圖像、視頻或 gif（如果它們已經(jīng)存在于網(wǎng)絡(luò)上）。

教程目標(biāo)

在使用 gem 實現(xiàn) Markdown 教程之前，讓我們看一下視頻并查看本教程的輸出。

外賣：使用 Rails App 的 Markdown 教程

• 探索 Redcarpet 和 Coderay 寶石

• 使用 gems 將 Markdown 添加到 Rails 應(yīng)用程序

• Github 倉庫

所以，現(xiàn)在我們很清楚這個使用帶有 Redcarpet 和 Coderay gems 的 Rails App 的 Markdown 教程將為我們提供什么。讓我們開始實施它，了解如何制作支持降價的博客應(yīng)用程序。

初始設(shè)置

使用以下命令創(chuàng)建一個新的 Rails 應(yīng)用程序

rails 新的 redcarpet-gem-example

安裝 Redcarpet 和 Coderay Gems

在Gemfile中添加以下 gem 。Redcarpet 用于 markdown 支持和 coderay 用于語法，突出顯示 markdown 中是否存在任何代碼。

寶石“紅地毯”寶石'coderay'

跑步捆綁安裝為我們的應(yīng)用程序安裝上述 gem。

生成文章腳手架

使用以下命令為文章生成腳手架。在這里，我們傳遞了Articles表中添加的屬性（列），即字符串類型的標(biāo)題和文本類型的內(nèi)容。

rails g scaffold 文章標(biāo)題：字符串內(nèi)容：文本

使用上述命令生成腳手架后，還會生成一個遷移文件。因此，我們需要遷移上述更改以更新架構(gòu)以添加包含標(biāo)題和內(nèi)容列的文章表。

軌道數(shù)據(jù)庫：遷移

更新路線

更新config/routes.rb文件如下

Rails.application.routes.draw 做
 資源：文章
 根“文章#index”結(jié)尾

將 Markdown 添加到 Rails 應(yīng)用程序的邏輯

現(xiàn)在使用 Rails 應(yīng)用程序進一步學(xué)習(xí)降價教程。打開app/helpers/application_helpers.rb文件，添加如下代碼

模塊 ApplicationHelper
 類 CodeRayify < Redcarpet::Render::HTML
   def block_code（代碼，語言）
     CodeRay.scan(代碼, 語言).div
   結(jié)尾
 結(jié)尾
 
 def降價（文本）
   coderayified = CodeRayify.new(:filter_html => true, :hard_wrap => true)
   選項= {
     fenced_code_blocks：真，
     no_intra_emphasis：真，
     自動鏈接：是的，
     lax_html_blocks：真
   }
   markdown_to_html = Redcarpet::Markdown.new（coderayified，選項）
   markdown_to_html.render(text).html_safe
 結(jié)尾結(jié)尾

上面的代碼將解析內(nèi)容中的 markdown 并將其呈現(xiàn)在視圖中。要實現(xiàn)它，您需要為視圖中的內(nèi)容調(diào)用上述代碼中的 markdown() 方法，如下一步所示。在這里，您可以隨時根據(jù)需要添加或刪除選項。閱讀README.markdown文件以探索有關(guān)降價選項的更多信息。

在 HTML 中呈現(xiàn) Markdown

使用以下內(nèi)容更新app/views/articles/show.html.erb

<p id="notice"><%= notice %></p>
 <h2><%= @article.title %></h2><hr /><%=降價（@article.content）%>
 <%= link_to '編輯', edit_article_path(@article) %> |<%= link_to '返回', articles_path %>

<%=降價(@article.content)%>將以文章的內(nèi)容作為參數(shù)調(diào)用markdown()函數(shù)，我們在上一節(jié)中寫在application_helpers.rb文件中。完成后，我們可以在視圖中看到解析后的降價。

用戶界面

完成上述代碼后，您的 UI 將如下所示 -

用戶界面將顯示您可以編輯或刪除的文章列表。您還可以通過單擊新建文章來添加文章。

添加新文章的 UI 如下所示——

點擊Create Article按鈕后，會自動添加文章——

您可以在Github 存儲庫中找到完整的源代碼。隨意克隆和使用代碼。

結(jié)論

言鼎科技