通用的 HTML 短代碼

在 Markdown 內容中編寫 HTML 的通用 HTML 短代碼列表。

贊助

成為我們的資助者或贊助商,以支持我們的工作。

贊助商

短代碼和原始 HTML 的區別是什麼?

兩者區別在於默認情況下,原始 HTML 會被省略,舉個例子。

1{{< html/p >}}
2Paragraph written in shortcode.
3{{< /html/p >}}
4
5<p>Paragraph written in raw HTML.</p>

第二個 <p>Paragraph written in raw HTML.</p> 將會被省略,為了避免這種情況,你必須使用短代碼或者啟用 markup.goldmark.renderer.unsafe

短代碼

html/tag

html/tag 可用於生成任意 HTML 元素,其中 _name 作為元素標籤名稱,比如 divp 等等,其餘的命名參數將視為元素的屬性。

1{{< html/tag _name=[name] [attr]=[val] >}}
2BODY
3{{< /html/tag >}}

html/void

類似於 html/tag 短代碼,html/void 用於生成空元素,比如 input

1{{< html/void _name=[name] [attr]=[val] >}}

舉個例子。

源碼
1{{< html/void
2  _name=input
3  type=password
4  placeholder="Please enter the password"
5  class="form-control mb-3"
6>}}
結果

快捷方式

該模塊還內置了一些不需要 _name 參數的、便利的短代碼。

  • html/div
  • html/p

示例

嵌套示例

源碼
1{{< html/tag _name=div class="mb-3 text-center" >}}
2{{< html/void _name=input name=name placeholder=Name >}}
3{{< /html/tag >}}
結果