Markdown 中的嵌入内容 | CSS-Tricks

Markdown 支持 HTML，因此，如果您需要嵌入 YouTube 视频，您可以直接复制粘贴其嵌入代码，将其放入 Markdown 文档中，然后您就可以使用了。对于 YouTube，还有其他选择。但总的来说，您无需执行任何特殊操作即可在 Markdown 中嵌入第三方媒体。

但是您确实需要为该特定服务执行必要的操作。例如，在 CodePen 上，您访问任何特定的 Pen 以获取嵌入代码，单击页脚中的“嵌入”，选择选项，并最终获取嵌入代码。在 Twitter 上，您单击向下箭头，然后选择“嵌入推文”，然后将您转发到另一个网站，您可以在其中选择选项并最终获取嵌入代码。每个服务的做法都不同。

这就是 Michaël De Boey 的 gatsby-remark-embedder 背后的理念，我最近看到了它。它阐述了这一点

尝试将知名服务（如 CodePen、CodeSandbox、Slides、SoundCloud、Spotify、Twitter 或 YouTube）嵌入到您的 Gatsby 网站中可能很困难，因为您必须知道如何针对所有这些不同的服务执行此操作。

因此，此插件的作用是允许您将要嵌入内容的 URL 放置在自己的一行上，它会神奇地转换为嵌入代码。例如，您放置一个指向 Pen 的 URL，如下所示

https://codepen.io/Coderesting/pen/yLyaJMz

…您将获得

<iframe
  src="https://codepen.io/team/codepen/embed/preview/PNaGbb"
  style="width:100%; height:300px;"
></iframe>

…在内容进入 DOM 之前。

作为 CodePen 的所有者，我不禁提醒您，以这种方式操作意味着您无法利用主题或使其可编辑。但是，我理解。

我认为有点好笑的是……这正是oEmbed 的作用。oEmbed 的核心思想是，“将内容的 URL 放置在自己的一行上，我们会尝试将其转换为嵌入代码。”它是一个明确定义的规范，并且有明确的数据来源，其中列出了支持此功能的网站。

但我想可能是 oEmbed 的一个缺陷，人们要么不知道它，要么不使用它。甚至Embedly似乎也有些“死气沉沉”了？