A blog - Fix

April 21, 2025

准备

Node.js ( >=18.18 version )
npm

开始

表格

已複製！
npm i remark-gfm

mdx-component.tsx

已複製！
import remarkGfm from 'remark-gfm'
const options = {
	parseFrontmatter: true,
	mdxOptions: {
		remarkPlugins: [remarkGfm],
		rehypePlugins: [
			rehypeKatex,
			[
				rehypePrettyCode,
				{
					theme: 'material-theme-palenight',
				},
			],
		],
	},
}

`Link`

mdx.css

已複製！
.markdown a {
	@apply border-b-[1px] border-(--link) text-(--link);
}

`tailwind.config.ts`

删除tailwind.config.ts文件

`code title`

已複製！
.markdown figcaption[data-rehype-pretty-code-title] {
	@apply -mx-4 px-4 text-xs text-gray-200 py-1 font-mono;
	border-top-right-radius: var(--radius-top);
	border-top-left-radius: var(--radius-top);
	background-color: var(--codeTitle-bg);
}