Tailwind + React에 마크다운 문서 출력하기

마크다운 렌더링을 위하여

저는 블로그를 마크다운으로 써야지!라고 생각했고 이를 실현하기로 마음 먹었습니다. 이를 위해선 사이트에 마크다운 파일을 렌더링 시킬 방법을 찾아봐야 했어요.

블로그에 마크다운 파일을 렌더링 시키기 위해선, 마크다운을 html으로서 변환하는 작업이 필요 했고 이러한 작업을 해주는 react-markdown 라이브러리를 많은 블로그에서 추천 받았습니다.

npm install react-markdown

을 통해서 react-markdown 라이브러리를 설치 할 수 있어요.

이 라이브러리는

import ReactMarkdown from 'react-markdown';

/*코드 작성*/
export default function Postdetail() {
  return(
    <div>
      <ReactMarkdown>{/*마크다운 텍스트*/}</ReactMarkdown>
    </div>
    );
}

과 같은 방식으로 마크다운 파일을 렌더링 시킬 수 있습니다.

문제점

저는 Tailwind CSS를 참 좋아합니다. (이건 다음에 따로 적어보기로 하고..) 그런데 Tailwind CSS를 사용하면서 React로 만들어진 웹 사이트에 마크다운 문서를 불러오려하니 문제가 발생하더군요. 차이가 느껴지시나요?

왼쪽은 TailwindCSS만을 적용한 경우인데, 마크다운 파일의 특수효과가 하나도 적용되지 않고 있는 모습을 볼 수 있습니다.

이럴땐 챗선생에게 물어보는게 가장 확실하겠죠..?

챗선생은 이를 위하여 마크다운 파일을 지원하도록 돕는 CSS파일을 만들어 주었습니다. 본래 오른쪽과 같이 보이던 친구는

CSS파일을 적용함으로서 이렇게 바뀌었어요. 여기에 적용한 CSS파일은 제 깃헙에서 확인 하실 수 있습니다.

다만 아직 문제가 있죠? 코드를 보여주는 부분에 syntax lint가 없어 코드가 잘 보이지 않는 경향이 있습니다. 이를 위하여 react-syntax-highlighter라이브러리를 설치 해주겠습니다.

npm install react-syntax-highlighter

를 통해서 설치 할 수 있어요.

저 같은 경우엔

import SyntaxHighlighter from "react-syntax-highlighter";
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

를 import 한 후 ReactMarkdown을 적용하는 부분에

<div className="markdown-content mx-auto px-4 py-8 font-nanum-gothic">
    <ReactMarkdown
        components={{
        code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || '')
            return !inline && match ? (
                <SyntaxHighlighter
                    children={String(children).replace(/\n$/, '')}
                    style={docco}
                    language={match[1]}
                    PreTag="div"
                    {...props}
                />
            ) : (
                <code className={className} {...props}>
                    {children}
                </code>
            )
        },
    }}>{ post }</ReactMarkdown>
</div>

다음과 같이 적용하였습니다.

확실히 이뻐졌죠?

이렇게 마크다운 문서를 리액트에 렌더링 해보았습니다. 코드가 잘 보이도록 폰트를 조금 수정하면 더 나아질 것 같지만.. 미래의 제게 넘기겠습니다.