A blog - Plugins

已複製！
npm install rehype-pretty-code shiki

已複製！
import rehypePrettyCode from 'rehype-pretty-code'
 
const options: MDXRemoteProps['options'] = {
	parseFrontmatter: true,
	mdxOptions: {
		rehypePlugins: [
			[
				rehypePrettyCode,
				{
					keepBackground: true,
					theme: 'material-theme-palenight',
				},
			],
		],
	},
}

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