Markdown 进阶:在文章中优雅地嵌入多媒体内容

22 年 3 月 12 日 星期六 16:08
216 字
2 分钟
阅读量 --

AI 摘要

✨ AI 生成

本文介绍了 Gyoza 主题基于 Astro 的 Markdown 拓展能力,通过自定义指令在文章中优雅嵌入 CodePen、YouTube 和 Bilibili 等多媒体内容的方法。其价值在于让技术博客作者无需编写繁琐 HTML 即可丰富文章表现力,并提供了获取对应 ID 的实用指南。

前言

在技术博客中,单纯的文字和静态代码块往往不足以表达清楚。Gyoza 主题基于 Astro 强大的 Markdown 拓展能力,内置了自定义的 Markdown 指令(Directives),让你无需编写繁琐的 HTML 标签,即可优雅地在文章中嵌入代码演示与多媒体视频。

本文将分别介绍 CodePen、YouTube 和 Bilibili 的嵌入方法,并附上获取对应 ID 的详细指南。

[!NOTE] 下方展示的 ::语法 是 Gyoza 特有的 Markdown 扩展语法,部分自定义静态博客引擎需要安装对应插件,请确保你的主题支持该功能。

一、嵌入 CodePen 代码演示

CodePen 是前端开发者分享和调试代码的最佳平台。Gyoza 允许你通过简单的指令直接嵌入笔(Pen)。

语法格式

md
::codepen{#Pen_ID author="作者名"}

文章标题:Markdown 进阶:在文章中优雅地嵌入多媒体内容

文章作者:超超

文章链接:https://www.43322.cn/2022/03/12/embed-videocode[复制]

最后修改时间:


版权声明:商业性转载须事先联系站长并获得授权;在非商业用途下,您可在任何媒体以任何形式自由复制、分发、修改本作品或基于本作品进行再创作,但须完整注明原文出处及文章链接,且分发基于本作品产生的衍生作品时,必须采用与本作品相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。

评论