如何使用 Redcarpet 和 Coderay Gems 添加 Markdown？

介绍

我们看到很多博客都支持降价。我们可以向任何支持降价的文章添加链接、图像、视频和 gif。考虑内容而不用担心博客的呈现方式可以让博主轻松制作出色的内容。在使用 rails app 的 markdown 教程中，我们将实现一个博客应用程序来编写支持 markdown 的文章。Rails 中使用 Active Storage 来添加对上传系统中存在的媒体（图像、视频和 gif）的支持，我们可以在本文中添加这些媒体。现在，我们可以使用它们的 URL 添加图像、视频或 gif（如果它们已经存在于网络上）。

教程目标

在使用 gem 实现 Markdown 教程之前，让我们看一下视频并查看本教程的输出。

外卖：使用 Rails App 的 Markdown 教程

• 探索 Redcarpet 和 Coderay 宝石

• 使用 gems 将 Markdown 添加到 Rails 应用程序

• Github 仓库

所以，现在我们很清楚这个使用带有 Redcarpet 和 Coderay gems 的 Rails App 的 Markdown 教程将为我们提供什么。让我们开始实施它，了解如何制作支持降价的博客应用程序。

初始设置

使用以下命令创建一个新的 Rails 应用程序

rails 新的 redcarpet-gem-example

安装 Redcarpet 和 Coderay Gems

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

宝石“红地毯”宝石'coderay'

跑步捆绑安装为我们的应用程序安装上述 gem。

生成文章脚手架

使用以下命令为文章生成脚手架。在这里，我们传递了Articles表中添加的属性（列），即字符串类型的标题和文本类型的内容。

rails g scaffold 文章标题：字符串内容：文本

使用上述命令生成脚手架后，还会生成一个迁移文件。因此，我们需要迁移上述更改以更新架构以添加包含标题和内容列的文章表。

轨道数据库：迁移

更新路线

更新config/routes.rb文件如下

Rails.application.routes.draw 做
 资源：文章
 根“文章#index”结尾

将 Markdown 添加到 Rails 应用程序的逻辑

现在使用 Rails 应用程序进一步学习降价教程。打开app/helpers/application_helpers.rb文件，添加如下代码

模块 ApplicationHelper
 类 CodeRayify < Redcarpet::Render::HTML
   def block_code（代码，语言）
     CodeRay.scan(代码, 语言).div
   结尾
 结尾
 
 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
 结尾结尾

上面的代码将解析内容中的 markdown 并将其呈现在视图中。要实现它，您需要为视图中的内容调用上述代码中的 markdown() 方法，如下一步所示。在这里，您可以随时根据需要添加或删除选项。阅读README.markdown文件以探索有关降价选项的更多信息。

在 HTML 中呈现 Markdown

使用以下内容更新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)%>将以文章的内容作为参数调用markdown()函数，我们在上一节中写在application_helpers.rb文件中。完成后，我们可以在视图中看到解析后的降价。

用户界面

完成上述代码后，您的 UI 将如下所示 -

用户界面将显示您可以编辑或删除的文章列表。您还可以通过单击新建文章来添加文章。

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

点击Create Article按钮后，会自动添加文章——

您可以在Github 存储库中找到完整的源代码。随意克隆和使用代码。

结论

言鼎科技