유닛으로 제 Mardown을ReactElement으로 바꿔주세요.

이것은 일련의 유니버설 문장의 결말이다.자신의 취향에 따라 확장된 Markdown을 분석한 후 ReactElement으로 전환해 렌더링 방법을 적는다.
모르는 단어는 용어를 모은 글를 참조하십시오.

현재 모범 사례

2021년 4월까지 아래의 포장을 조합해서 사용하는 것이 좋다.

remark-parse

remark-rehype

rehype-react

코드 예

이전에 만든 Zenn의 메시지 서명을 설명하는 플러그인를 사용할 때의 코드 예시.
processor.ts

import React from "react";
import unified from "unified";
import parser from "remark-parse";
import mdast2hast from "remark-rehype";
import compiler from "rehype-react";

import { attacher, handler } from "./zenn-message";

const processor = unified()
  .use(parser)
  .use(attacher)
  .use(mdast2hast, { handlers: { message: handler } })
  .use(compiler, { createElement: React.createElement });

export default processor;

변환 프로세스의 정의는 다음과 같습니다.
App.tsx

import React from "react";
import processor from "./processor";

const SAMPLE = `
:::message
This is a message
:::

:::message
But this is not a message
::

~~~markdown
# Heading 1

**strong**
~~~
`;

function App() {
  return (
    <>
      <h1>This is a Markdown</h1>
      {processor.processSync(SAMPLE).result}
    </>
  );
}

export default App;

이 항목이 표시되면 다음이 표시됩니다.

의도대로 렌더링되었습니다.

기타 옵션

리마크에 있는 사람한테 물어봤어요.로 판단하다.

리마크-react 안 써요?

계획은 더 이상 유지보수되지 않는다.또한 현재 Type Script는 지원되지 않습니다.

그럼 react-markdown은요?

react-markdown은 Mardown에서 React Element으로 전등으로 전환하려는 상황을 구상한 포장이다.
실제로 react-markdown은 설정을 상세하게 지정할 수 없기 때문에 아래처럼 쉽게 사용할 수 있습니다.

import React from "react";
import ReactMarkdown from "react-markdown";
import { render } from "react-dom";

render(<ReactMarkdown># Hello, *world*!</ReactMarkdown>, document.body);

react-remark가 Hooks를 준비했는데...?

리액트 17은 움직이지 않는 것 같아.쫓아다닐 기운이 없어서.
하지만 앞으로는 주요 보양이다.