mdx 常用元素
- Published on
- Authors
- Name
- Wxm
这里是这个模版的一些常用 mdx 元素,写在这里方便复制使用。
目录
<TOCInline toc={props.toc} exclude="Introduction" />
B 站视频
<iframe
src="//player.bilibili.com/player.html?isOutside=true&aid=1355658592&bvid=BV1Xz421b7FU&cid=1574676110&p=1&muted=false"
className="w-full h-[342px]"
autoPlay
scrolling="no"
border="0"
frameBorder="no"
framespacing="0"
allowFullScreen={true}
></iframe>
markdown 图片
) 
mdx 图片(宽)
<div className="flex flex-row justify-center bg-zinc-100 rounded md:-mx-28">
<img alt="GitHub test" loading="lazy" width="2000" height="1000" decoding="async" data-nimg="1" className="my-0 rounded" srcSet="" src="/static/test2.webp" />
</div>
mdx 视频(普通)
<div className="flex flex-row justify-center bg-zinc-100 rounded-sm ">
<video autoPlay loop preload="auto" playsInline className="my-0 rounded">
<source src="/static/test.mp4" type="video/mp4">
</video>
</div>
mdx 视频(宽)
<div className="flex flex-row justify-center bg-zinc-100 rounded-sm md:-mx-28">
<video autoPlay loop preload="auto" playsInline className="my-0 rounded">
<source src="/static/test.mp4" type="video/mp4" />
</video>
</div>
链接
<a href="https://google.com" target="blank"></a>
布局
两列布局(宽)
<div className="grid gap-6 md:grid-cols-2 md:-mx-24"></div>
Github Test
Github Test Github Test Github Test Github Test Github Test Github Test
两列布局(窄)
<div className="flex flex-col gap-6 md:grid md:grid-cols-2"></div>
Github Test
Github Test Github Test Github Test Github Test Github Test Github Test Github Test
item 单列
<div className="flex flex-col gap-2">
<video autoPlay loop preload="auto" playsInline className="my-0 rounded-md md:max-h-[540px]">
<source src="/static/test.mp4" type="video/mp4" />
</video>
<div className="flex flex-col px-2 pt-2">
<div>Github Test</div>
<div className="imgDesc text-zinc-400">
Github Test Github Test Github Test Github Test Github Test Github Test Github Test
</div>
</div>
</div>
item 双列
<div className ="col-span-2">
<div className="flex flex-col gap-2">
<a href="https://google.com" target="blank">
<video autoPlay loop preload="auto" playsInline className="my-0 rounded-md md:max-h-[540px]">
<source src="/static/test.mp4" type="video/mp4" />
</video>
</a>
<div className="flex flex-col px-2 pt-2">
<div>Github Test</div>
<div className="imgDesc text-zinc-400">
Github Test Github Test Github Test Github Test Github Test Github Test
</div>
</div>
</div>
</div>