React 优雅的渲染 Markdown

老板：一比一还原 github readme 的效果

我：OK，好的

背景就是这样的，下图是实现的效果。

前备内容

• react-markdown
• rehype-raw （再次解析DOM树的插件）
• remark-gfm （支持 GFM 的备注插件（自动链接文字、脚注、删除线、表格、任务列表））
• remark-unwrap-images （用于删除图像换行段落的插件）
• rehype-rewrite （可重写某些元素）

什么是 react-markdown ？

这个包是一个 React 组件，可以给它一个 markdown 字符串，它将安全地呈现给 React 元素。您可以传递插件来更改 Markdown 的转换方式，并传递将使用的组件而不是普通的 HTML 元素。

一个基本的使用。

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'

const markdown = '# Hi, *Pluto*!'

createRoot(document.body).render(<Markdown>{markdown}</Markdown>)

一个重要特点，支持插件，对 markdown 使用统一的、专门的 remark，对 HTML 使用 rehype，这些工具是通过插件转换内容的工具。 使用 remark-gfm 插件的例子如下。

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `A paragraph with *emphasis* and **strong importance**.

> A block quote with ~strikethrough~ and a URL: https://reactjs.org.

* Lists
* [ ] todo
* [x] done

A table:

| a | b |
| - | - |
`

createRoot(document.body).render(
  <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>
)

开始操作

获取 GitHub README.md，此处注意地址

首先拿到地址，raw.githubusercontent.com/toeverythin…

使用 fetch 拿到 markdown 内容

const res = await (
  await fetch('https://raw.githubusercontent.com/toeverything/AFFiNE/canary/README.md')
).text();
console.log(res);

特殊情况

这种就是 readme 中写的相对路径，需要自己处理

• 解析 github readme 地址获取仓库的相关信息

export const parseGithubUrl = (url: string) => {
  if (!url) return null;
  let urlObj = new URL(url);
  let pathParts = urlObj.pathname.split('/');

  return {
    hostname: urlObj.hostname,
    organization: pathParts[1],
    repository: pathParts[2],
    branch: pathParts[3],
    remainingPath: pathParts.slice(4).join('/') + urlObj.search
  };
};

• 使用插件 rehype-rewrite 重写 img 元素

  const myRewrite = (node, index, parent) => {
    if (node.tagName === 'img' && !node.properties.src.startsWith('http')) {
      const imgSrc = node.properties.src.replace(/^\.\/|^\//, '');

      node.properties.src = `https://${githubOptions?.hostname}/${githubOptions?.organization}/${githubOptions?.repository}/${githubOptions?.branch}/${imgSrc}`;
    }
  };

经过这个操作，特殊情况也被我们处理了。

GitHub CSS 样式

这里使用的 github-markdown-css ，是一个 CSS 样式库，用于将 HTML 内容呈现为类似 GitHub 上的 Markdown 格式。这个样式库使得你可以轻松地在你的网站或应用中使用类似 GitHub 的 Markdown 样式，使得你的文本内容看起来更加清晰、易读，并且具有 GitHub 上 Markdown 的特有风格。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
<style>
	.markdown-body {
		box-sizing: border-box;
		min-width: 200px;
		max-width: 980px;
		margin: 0 auto;
		padding: 45px;
	}

	@media (max-width: 767px) {
		.markdown-body {
			padding: 15px;
		}
	}
</style>
<article class="markdown-body">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>

核心代码

import MyIcon from '@/components/Icon';
import { TemplateType } from '@/types/app';
import { parseGithubUrl } from '@/utils/tools';
import { Box } from '@chakra-ui/react';
import 'github-markdown-css/github-markdown-light.css';
import { useEffect, useMemo, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import rehypeRewrite from 'rehype-rewrite';
import remarkGfm from 'remark-gfm';
import remarkUnwrapImages from 'remark-unwrap-images';
import styles from './index.module.scss';

const ReadMe = ({ templateDetail }: { templateDetail: TemplateType }) => {
  const [templateReadMe, setTemplateReadMe] = useState('');

  const githubOptions = useMemo(
    () => parseGithubUrl(templateDetail?.spec?.readme),
    [templateDetail?.spec?.readme]
  );

  useEffect(() => {
    if (templateDetail?.spec?.readme) {
      (async () => {
        try {
          const res = await (await fetch(templateDetail?.spec?.readme)).text();
          setTemplateReadMe(res);
        } catch (error) {
          console.log(error);
        }
      })();
    }
  }, [templateDetail?.spec?.readme]);

  // @ts-ignore
  const myRewrite = (node, index, parent) => {
    if (node.tagName === 'img' && !node.properties.src.startsWith('http')) {
      const imgSrc = node.properties.src.replace(/^\.\/|^\//, '');

      node.properties.src = `https://${githubOptions?.hostname}/${githubOptions?.organization}/${githubOptions?.repository}/${githubOptions?.branch}/${imgSrc}`;
    }
  };

  return (
    <Box flexGrow={1} border={'1px solid #DEE0E2'} mt={'16px'}>
      <Box
        p={'16px 0'}
        borderBottom={'1px solid #DEE0E2'}
        color={'#24282C'}
        fontSize={'18px'}
        fontWeight={500}
      >
        <MyIcon name={'markdown'} mr={5} w={'24px'} h={'24px'} ml={'42px'} color={'myGray.500'} />
        README.md
      </Box>
      <Box p={'24px'} className={`markdown-body ${styles.customMarkDownBody}`}>
        <ReactMarkdown
          linkTarget={'_blank'}
          rehypePlugins={[rehypeRaw, [rehypeRewrite, { rewrite: myRewrite }]]}
          remarkPlugins={[remarkGfm, remarkUnwrapImages]}
        >
          {templateReadMe}
        </ReactMarkdown>
      </Box>
    </Box>
  );
};

export default ReadMe;

总结撒花🎉

react-makrdown 配合各种插件一起使用，非常方便，插件可实现代码高亮、数学公式渲染等功能，提升用户体验。使用 github-markdown-css 实现css 效果。