[Day 09] Markdown 兩種插入 iframe 的方法 - 嘗試 30 日寫文充版挑戰

前言 - Prologue

嘗試 30 天寫文充實版面 (成功跳過假日 ლ(́◕◞౪◟◕‵ლ) ) 不間斷更新文章的 Day 9

先給不知道 Markdown 是什麼的簡短介紹一下，Markdown 是一種輕量級的標記語言，常用於撰寫 Blog、文件、討論區等地方。除了基本的文字標記外，Markdown 還支持插入影像、超連結、程式碼等多種元素。在本篇文章中，將介紹如何在 Markdown 中插入 iframe，讓你可以在文章中輕鬆嵌入其他網頁的內容。

正文 - Main text

在 Markdown 中插入 iframe 很簡單，因為 Markdown 是兼容 HTML 的，所以使用方式也和 HTML 類似。而插入 iframe 的方法有兩種，分別是使用 HTML 語法和使用 Markdown 的擴展語法。

使用 HTML 語法插入 iframe

使用 HTML 語法插入 iframe，只需要在 Markdown 文件中使用 <iframe> 標籤，並設定相應的屬性，例如 src、width、height 等。

下方是一個範例，它將會在 Markdown 文件中插入一個 Youtube 影片的 iframe：

<iframe 
  src="https://www.youtube-nocookie.com/embed/uxyrydm1CUM"
  width="560"
  height="315"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write;
    encrypted-media; gyroscope; picture-in-picture;
    web-share"
  allowfullscreen>
</iframe>

效果範例：

使用 Markdown 的擴展語法

使用 Markdown 的擴展語法，具體實現方式取決於你所使用的 Markdown 編輯器，稍後會列出至貼文發布日期版本為止可以使用的 Markdown 編輯器。不過一般來說，可以使用類似下面的語法：

[iframe](https://www.youtube-nocookie.com/embed/uxyrydm1CUM) {: width="560" height="315" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen }

這個語法使用了 Markdown 的自訂連結語法，並在連結後面使用大括號 {} 加入 iframe 的屬性。這種方式相對於使用 HTML 語法，語法更加簡潔。

總而言之，無論使用哪種方式，插入 iframe 都是非常容易的，因為 Markdown 是兼容 HTML 的，所以使用方式也和 HTML 類似。

效果範例由於擴展語法支援並不支援 Nuxt.js 的 @nuxt/content 模組，故不展示。

Markdown 的擴展語法支援度

Markdown 的擴展語法是不是被支援，取決於所使用的 Markdown 引擎和編輯器。以下是一些常見的 Markdown 引擎和編輯器，以及它們是否支援擴展語法插入 iframe。

1.支援擴展語法插入 iframe 的 Markdown 引擎和編輯器：

• Markdown-it：可以使用 markdown-it-attrs 插件來支援擴展語法
• Remarkable：可以使用 remarkable-embed 插件來支援擴展語法
• Typora：支援擴展語法
• VS Code 的 Markdown 插件：支援擴展語法

2.不支援擴展語法插入 iframe 的 Markdown 引擎和編輯器：

• GitHub Flavored Markdown：不支援擴展語法
• Nuxt.js 的 @nuxt/content 模組：不支援擴展語法

需要注意的是，即使一個 Markdown 引擎或編輯器支援擴展語法插入 iframe，也可能需要額外的插件或配置才能正確使用。所以在使用前，最好查閱該引擎或編輯器的官方文檔，了解其支援的擴展語法和相應的配置方法。

參考資料 - Reference

[1] embed openstreetmap iframe in github markdown - Stack Overflow

https://stackoverflow.com/questions/48402823/embed-openstreetmap-iframe-in-github-markdown

後記 - Epilogue

使用 HTML 擴展語法插入 iframe 雖然非常簡單，只需要在 Markdown 中直接使用 <iframe> 標籤即可。但是這種方法需要手動輸入 HTML 代碼，而且不夠簡潔易讀可能不適合非開發人員使用，相比之下使用 Markdown 擴展套件插入 iframe 可以讓 Markdown 更加易讀易用。總結來講，使用哪種方法來插入 iframe 取決於你的需要和喜好，但擴展語法一定要考慮到所使用的 Markdown 引擎和編輯器支援度。

語言匱乏，明天依舊要想更新什麼好了 ... 決定我要開始回去撿 ASP.net 的知識了，待在前端太久了 XD