React Markdown 라이브러리 사용하기

라이브러리 설치

• Style 데모 사이트

❗️markdown 적용이 안 되시나요?

You need to remove the first empty line and all the spaces at the beginning of each line.
참고: Stackoverflow 링크

이렇게 앞에 공백이 있으면 markdown 적용이 안 된다.

   const markdown = `
      Here's the data that you requested:
      ### Top 15 Artists
      Here are the top 15 artists in the US **from the last 7 days**:
      {table-1}
      If you have any questions, feel free to ask!
	`

아래처럼 공백을 모두 제거해야 적용이 된다.

   const markdown = `
Here's the data that you requested:
### Top 15 Artists
Here are the top 15 artists in the US **from the last 7 days**:
{table-1}
If you have any questions, feel free to ask!
`

🎨 react-syntax-highlighter

❗️이런 에러를 마주하셨나요

1. Unexpected token 'export'

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; 
import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism'

예시를 따라서 위처럼 import를 하면, 아래의 에러를 보게 된다.

Getting syntax error (Unexpected token 'export') 

아래처럼 import directory path를 수정해주면 해결된다.

import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism

• 📌 esm => cjs 로 바꿔주기

참고 링크: https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/473

🧐 style 수정하기

나의 경우, margin: 0 으로 설정하고 싶었다.

<Markdown
className={styles.markdown} // *** 여기
components={{
    code(props) {
        const { children, className, node, ...rest } = props;
        const match = /language-(\w+)/.exec(className || '');
        return match ? (
            <SyntaxHighlighter
                {...rest}
                customStyle={{ margin: '0' }} // *** 여기
                codeTagProps={{ style: { margin: 0 } }} // *** 여기
                PreTag="div"
                language={match[1]}
                style={atomDark}
            >
               {String(children).replace(/\n$/, '')}
           </SyntaxHighlighter>
         ) : (
           <code {...rest} className={className}>
             {children}
           </code>
         );
    },
 }}
>