Markdown Viewer 라이브러리

 

 

react-markdown , remark-gfm 설치

npm i react-markdown remark-gfm

 

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

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

 

 

 

npm install -D @tailwindcss/typography

 

 

tailwind.config.js

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

 

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

@tailwindcss/typography - Tailwind CSS

 

 

하이라이터 개발자모드 설치

npm i -save-dev react-syntax-highlighter

 

 

MarkdownViewr.tsx

import React from 'react'
import {createRoot} from 'react-dom/client'
import Markdown 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!')
~~~
`

createRoot(document.body).render(
  <Markdown
    children={markdown}
    components={{
      code(props) {
        const {children, className, node, ...rest} = props
        const match = /language-(\w+)/.exec(className || '')
        return match ? (
          <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={dark}
          />
        ) : (
          <code {...rest} className={className}>
            {children}
          </code>
        )
      }
    }}
  />
)