Markdown外部图像链接红地毯

Question

我正在使用红地毯宝石来标记用户生成的文本，并希望显示外部链接/图像主机的图像。到目前为止，我已经尝试过这样的东西：

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，因为注入</div>、ids和类确实会使站点变得一团糟。这将删除图像标记。

在保证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调用中将裸图像链接转换为降价识别的图像链接。这导致嵌入的图像url被呈现为这样：

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

而且您不必以任何方式更改您的降价文档；它真的很好吃。