React 个人博客 集成 MDX / tailwindcss/typography

onlion rick-chou.github.io/react-aweso…

代码地址 github.com/rick-chou/o…

博客系列文章

• React个人博客 初始化

• React个人博客 时序图

• React个人博客 集成 Vue Music Player

• React个人博客 集成 MDX / tailwindcss/typography

第一版的方案用的是 vite-plugin-markdown 用的是 beta 版本

"vite-plugin-markdown": "^2.2.0-2",

import { Mode, plugin as md } from 'vite-plugin-markdown';

// vite plugin
md({ mode: [Mode.HTML, Mode.MARKDOWN, Mode.REACT, Mode.TOC] }),

然后用 tailwind 的 @tailwindcss/typography plugin

import { html } from 'README.md';

;

其实整体下来效果还不错 可参考 @tailwindcss/typography Live Demo

现在的方案是接入 @mdx-js/react

一方面它支持 jsx 语法

另一方面可以用它的社区插件实现更多的定制化的功能

import mdx from '@mdx-js/rollup';
// 实现代码高亮
import rehypeHighlight from 'rehype-highlight';
// 给代码块添加props 例如添加文件名
import rehypeMdxCodeProps from 'rehype-mdx-code-props';
// 支持类似Github Markdown语法
import remarkGfm from 'remark-gfm';

// plugin
  mdx({
    jsxImportSource: '@emotion/react',
    providerImportSource: '@mdx-js/react',
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeHighlight, rehypeMdxCodeProps],
  }),

改写 Article 组件 添加 not-prose class 类名可以告诉 tailwind 这里不需要 typography 插件的样式

import { MDXProvider } from '@mdx-js/react';
import { type FC, type PropsWithChildren } from 'react';
import { codeBlockStyle, codeBtnStyle, codeFilename } from './style';
import './theme.scss';

const Article: FC = ({
  children,
  classname = '',
}) => {
  return (
    
       ,
          pre(props: any) {
            return (
              
                
                  
                    
                    
                    
                    
                      {props.filename ??
                        props?.children?.props?.className?.split('-').at(-1)}
                    
                  
                  
                
              
            );
          },
        }}>
        {children}
      
    
  );
};

export default Article;

因为项目中引用了 tailwindcss

corePlugins: {
  preflight: true,
}

且在配置中除去了默认样式 所以还得用 @tailwindcss/typography 包一层