使用 Redcarpet 的 Markdown 外部图像链接

Posted 2023-03-30

【中文标题】使用 Redcarpet 的 Markdown 外部图像链接

【英文标题】：Markdown external image links with Redcarpet

【发布时间】：2016-05-18 22:23:05

【问题描述】：

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

def markdown(text)
   options =  ... 
   extension =  ... 
   text.gsub!(/(https?:\/\/[\S]*.jpg)/, '<img src="\1" >')
   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 安全？

【参考方案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  src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" />

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

【讨论】：

感谢您的回答，但它似乎对我不起作用。输出现在是文本形式的所有 html 元素，图像不会被渲染。

我更新了答案，这对于你想要做的事情会好得多。如果您有任何问题，请务必告诉我。