ruby-on-rails - Markdown 外部图像链接与 Redcarpet

Question

我正在使用 redcarpet gem 来标记用户生成的文本，并希望显示外部链接/图像托管的图像。到目前为止，我已经尝试过这样的事情:

def markdown(text)
   options = { ... }
   extension = { ... }
   text.gsub!(/(https?:\/\/[\S]*.jpg)/, '<img src="\1" width="100%">')
   renderer = Redcarpet::Render::HTML.new(options)
   markdown = Redcarpet::Markdown.new(renderer, extensions)
   markdown.render(text).html_safe
end

不过，我想escape_html或 filter_html , 因为注入(inject) </div> , id s 和类(class)真的会把网站搞得一团糟。这将删除图片标签。

有没有更好的方法来渲染外部图像，同时保持 HTML 安全？

Answer 1

像这样:

require "redcarpet"
require "action_view"

class HTMLBlockCode < Redcarpet::Render::HTML
  include ActionView::Helpers::AssetTagHelper

  def image(link, title, alt_text)
    image_tag(link, title: title, alt: alt_text, width: "100%")
  end
end

def markdown(text)
   renderer = HTMLBlockCode.new
   text.gsub!(/(https?:\/\/[\S]*.jpg)/, '![](\1)')
   markdown = Redcarpet::Markdown.new(renderer)
   markdown.render(text)
end

text = File.read("rc_test.md")

puts markdown(text)

这会在 RedCarpet 上安装一个自定义图像渲染器，它会向您的图像元素添加一个 width="100%" 属性。它还在 gsub 调用中将裸图像链接转换为 markdown 可识别的图像链接。这导致嵌入的图像 url 被呈现如下:

<img width="100%" src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />

而且您不必以任何方式更改您的 markdown 文档；它自然美味。