mdx常用元素
这里是一些常用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>