react-markdown

https://github.com/remarkjs/react-markdown

GitHub - remarkjs/react-markdown: Markdown component for React

npm install react-markdown

사용법

적용할 컨텐츠를 감싸거나

import React from 'react'
import ReactMarkdown from 'react-markdown'
import ReactDom from 'react-dom'

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

children으로 설정해도 됨

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: https://reactjs.com.`

ReactDom.render(
  <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />,
  document.body
)

remarkGfm 플러그인은 권장사항 (취소선, 표, 작업 목록 및 URL에 대한 지원)

npm install remark-gfm

주의사항

마크 다운 사용하는 컴포넌트에 "use client" 설정해줘야함

 

테일윈드 사용 시 className으로 스타일링하지 않은 것으로 판단해 마크다운 스타일이 적용 안 됨.

이 경우 테일윈드의 @tailwindcss/typography플러그인을 설치하면 해결 됨

 

설치

npm install -D @tailwindcss/typography

설정

import typography from "@tailwindcss/typography";

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    typography,,
    // ...
  ],
}

적용

className="prose"

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `Just a link: https://reactjs.com.`

ReactDom.render(
  <ReactMarkdown className="prose max-w-none" children={markdown} remarkPlugins={[remarkGfm]} />,
  document.body
)

prose에 더해 추가로 폰크 크기나 색상 등 추가 설정할 수 있음

마크 다운 내부적으로 너비를 제한하고 있기 때문에 max-w-none를 해줘야 함

https://tailwindcss.com/docs/typography-plugin

@tailwindcss/typography - Tailwind CSS

 

추가 설정

글씨 강조

npm install react-syntax-highlighter --save

npm i --save-dev @types/react-syntax-highlighter

ReactMarkdown 태그에 components의 code옵션 적어주면 됨.

자동 import하려고 하면 엄청 여러가지가 뜨는데 예시의 import 구문을 복붙하자.

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism' // 원하는 옵션 사용

// Did you know you can use tildes instead of backticks for code in markdown? ✨
const markdown = `Here is some JavaScript code:

~~~js
console.log('It works!')
~~~
`

ReactDom.render(
  <ReactMarkdown
    children={markdown}
    // components 부분 통째로 가져다 수정해서 쓰면 됨
    components={{
      code({node, inline, className, children, ...props}) {
        const match = /language-(\w+)/.exec(className || '')
        return !inline && match ? (
          <SyntaxHighlighter
            {...props}
            style={dark} // import에서 옵션 바꿨다면 교체
            language={match[1]}
            PreTag="div"
          >{String(children).replace(/\n$/, '')}</SyntaxHighlighter>
        ) : (
          <code {...props} className={className}>
            {children}
          </code>
        )
      }
    }}
  />,
  document.body
)

img를 next.jx의 Image태그로 변경

code다음 img에 대해 옵션 설정해주면 됨

    components={{
    code({
    ~~~~
    )
    },
    img: (image) => (
      <Image
        className='w-full max-h-60 object-cover'
        src={image.src || ''}
        alt={image.alt || ''}
        width={500}
        height={350}
      />
    ),

그 후 넥스트 설정에서 마크 다운에 사용할 이미지 경로 지정해주면 됨

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['github.com'],
  },
}

module.exports = nextConfig

---

Vite에서 .md 불러오기

1. 플러그인 설치

npm install vite-plugin-remark-rehype --save-dev

2. 플러그인 적용

// vite.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import markdownPlugin from "vite-plugin-remark-rehype";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), markdownPlugin()],
});