在Github Markdown中嵌入OpenStreetMap的iframe

Question

从 openstreetmap 页面的“共享”选项卡中，我可以将地图视图导出为 HTML，例如：

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=6.047544479370118%2C46.23053702499607%2C6.061706542968751%2C46.23821801159735&amp;layer=mapnik" style="border: 1px solid black"></iframe>
<br/><small><a href="https://www.openstreetmap.org/#map=17/46.23438/6.05463">View Larger Map</a></small>

我想将这个嵌入到GitHub上的README.md页面中，例如。

搜索周围，最接近在markdown中嵌入iframe的是GitLab指南。然后我尝试使用<figure class="video_container">标签，但无论是在GitLab还是GitHub上都没有看到它能工作。

# how to find us?

we will be here:
<figure class="video_container">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=6.047544479370118%2C46.23053702499607%2C6.061706542968751%2C46.23821801159735&amp;layer=mapnik" style="border: 1px solid black"></iframe>
</figure>

我是否遗漏了什么，或者这是最好留给真正的HTML来完成并且超出了Markdown所能/应该做的范围？

- pseyfert

---

相关 https://dev59.com/KFkT5IYBdhLWcg3wh_1U - Adriano

Answer 1

不支持GFM

在GitHub风格的Markdown（GFM）中嵌入<iframe>是不受支持的。以下是官方说明：

6.11 禁用原始HTML（扩展）

GFM启用了标签过滤器扩展，当渲染HTML输出时将过滤以下HTML标记：

<title> <textarea> <style> <xmp> <iframe> <noembed> <noframes> <script> <plaintext>

[...] 特别选择这些标记，因为它们会以独特的方式更改HTML的解释方式 [...], 这通常在其他渲染的Markdown内容的上下文中是不希望发生的。

所有其他HTML标记保持不变。

---

可能的解决方法

类似于其他答案中提到的视频解决方案，您可以嵌入地图的截图，并将其设置为指向您OSM地图部分URL的链接：

- martin-martin

---

<object>也被禁用了，尽管它并未列在他们的网站上。 - Trade-Ideas Philip

Answer 2

在 README.md 文件中不能直接使用 iframe。GitHub 的 markdown 解析器不支持使用 iframe 标签。

但是，你可以通过 GitHub Pages 在 README.md 文件中嵌入 HTML 代码。以下是一个示例：

1. 在你的仓库中创建一个 HTML 文件，我们称之为 embed.html。

2. 在 embed.html 中，使用要嵌入的内容的 URL 包含 iframe 标签。例如：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

3. 将更改提交并推送到您的存储库。

4. 通过转到存储库设置，向下滚动到“GitHub页面”部分，并选择要用于发布的分支来启用GitHub Pages。

5. 启用GitHub Pages后，您可以通过导航到https://<your-username>.github.io/<your-repo-name>/embed.html来查看嵌入式内容。

请注意，使用iframe标签在存储库中嵌入外部内容可能会违反内容提供者的服务条款。在这样做之前，请确保您有权嵌入该内容。

- Ajay Dhangar