(七) 博客前端项目实战 - 安装 react-markdown

安装react-markdown react-syntax-highlighter

npm i react-markdown react-syntax-highlighter

引入react-markdown react-syntax-highlighter

import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {duotoneLight} from 'react-syntax-highlighter/dist/esm/styles/prism'

components
$\color{orange}{注意高亮部分写法：}\$

~~~js
const Test = React.lazy(() => import('你的组件'));
<Suspense fallback="loading...">
  <Test />
</Suspense>
~~~

const article = () => {
  const [content, setContent] = useState("");
  const { id } = useParams();
  const url = `/markdown/article-${id}.md`;
  useEffect(() => {
    fetch(url)
      .then((res) => res.text())
      .then((text) => setContent(text));
  }, []);
  return (
    <div><ReactMarkdown
    children={content}
    components={{
      code({node, inline, className, children, ...props}) {
        const match = /language-(\w+)/.exec(className || '')
        return !inline && match ? (
          <SyntaxHighlighter
            children={String(children).replace(/\n$/, '')}
            style={duotoneLight}
            language={match[1]}
            PreTag="div"
            {...props}
          />
        ) : (
          <code className={className} {...props}>
            {children}
          </code>
        )
      }
    }}/></div>
  );
}
export default article;