🐉 tailwindCss + markdown 적용

✍️ markdown 뷰어 사용법

만약 tailwindCss를 적용했거나 혹은 css를 reset 했다면 아마도 정상적으로 작동하지 않을 가능성이 높습니다.
왜냐하면 tailwindCss에서 @tailwind base 부분이 기본적으로 태그의 스타일을 변경시켜버리기 때문에 markdown이 파싱된 태그들이 화면에 랜더링 되어도 기본 css가 모두 제거되어서 레이아웃이 이상하게 나오게 됩니다..

• 해결법 1
  tailwindcss - preflight를 이용해서 기본 스타일 적용을 없애버릴 수 있습니다.
  하지만 저는 이미 다른 페이지를 만들었기도 하고, @tailwind base에서 적용해 주는 스타일이 좋다고 생각해서 다른 방법을 찾았습니다.

• 해결법 2
  tailwindcss - typography
  특정 영역에만 기본 스타일을 그대로 적용하는 방법으로 이해했습니다.
  prose로 여러 가지 속성이 있고, 적용하기 위해 설치해야 할 플러그인과 세팅이 있으니 공식 문서를 보고 따라 하면 정상적으로 작동합니다.

1. tailwindcss.config.js 수정

• 설치

npm install -D @tailwindcss/typography

• tailwind.config.js

module.exports = {
  // 아래 구문 추가
  plugins: [require("@tailwindcss/typography")],
}

2. react-markdown 사용

• 설치

npm install react-markdown remark-gfm

• 코드 예시

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

type Props = {
  markdown: string;
};

const Markdown = ({ markdown }: Props) => {
  return (
    <ReactMarkdown
      // react-markdown에서 지원해 주지 않는 문법들을 추가로 변형시키는데 사용하는 플러그인 ( table, link 등 )
      remarkPlugins={[remarkGfm]}
      // 아래처럼 사용하면 추가적으로 특정 태그에 원하는 스타일링을 부여할 수 있음
      components={{
        a: ({ node, ...props }) => (
          <a {...props} className="text-indigo-500 no-underline" />
        ),
      }}
    >
      {markdown}
    </ReactMarkdown>
  );
}