comark-embed
视频，音频和实时代码从一个链接：YouTube， Vimeo, Loom, Spotify, CodePen, StackBlitz, Figma，和X播放器，从链接单独读取，没有网络获取。一个 Comark HTML, Vue， React和Svelte插件。
pnpm add comark comark-embed
import { createHtmlRenderer } from "@comark/html";
import embed, { components } from "comark-embed/html";
const render = createHtmlRenderer({ plugins: [embed()], components });
::embed{url="https://youtu.be/KCrXgy8qtjM" title="Watch before standup: Vite in 100 Seconds" start=30}
::
::embed{url="https://comark.dev" title="Comark docs, for the duck report"}
::
url 一定是。 https:// 链接。 title 命名播放器和它下面的链接的文本，这使页面在打印，提要阅读器和iframe被阻止的地方可读。 start 是YouTube或Vimeo视频的几秒钟。用 :: 下一行。
| 提供者 | 链接上面写着 |
|---|---|
| YouTube | youtube.com/watch?v=， youtu.be/， /shorts/， /embed/， /live/;戏剧从 youtube-nocookie.com |
| Vimeo | vimeo.com/<number>，未列出的链接及其散列；玩 dnt=1 |
| 织机 | loom.com/share/<id>， /embed/<id> |
| Spotify | open.spotify.com/ 曲目，专辑，播放列表，剧集，节目和艺术家 |
| CodePen | codepen.io/<user>/pen/<id> (也 full， details,或 embed） |
| StackBlitz | stackblitz.com/edit/<project>， stackblitz.com/github/<owner>/<repo>[/<path>] |
| Figma | figma.com/design， file， proto， board， slides, deck |
| X | x.com/<user>/status/<id>， twitter.com, mobile. 链接;长到柱子的高度 |
任何其他 https:// 链接呈现为带有其 title 和主机。卡片还不能获取页面标题，所以给每个卡片一个 title。
插件增加了每一个问题 meta.issues，因此主机可以在发布文档之前拒绝该文档。一个 url 这不是 https:// 呈现。
渲染器
| 渲染器 | 进口 |
|---|---|
@comark/html | comark-embed/html：样式是内联的 |
@comark/vue | comark-embed/vue |
@comark/react | comark-embed/react |
@comark/svelte | comark-embed/svelte |
每个条目将解析插件导出为 default 还有渲染器 components． Vue、React和Svelte组件在挂载时添加样式；进口 comark-embed/style.css 使用您的样式，使服务器呈现的页面不会移位。
样式遵循shadcn/ui：它们读取它的CSS变量，例如 --background 和 --border，否则使用它的中性主题。设置共享 --comark-* 令牌主题每个插件一次；规则放在 comark CSS层，所以任何简单的规则你自己的胜利。覆盖 --ce-app-height 改变CodePen， StackBlitz和Figma的高度；见嵌入 主题页面。