react-markdown , remark-gfm 설치
npm i react-markdown remark-gfm
https://github.com/remarkjs/react-markdown
GitHub - remarkjs/react-markdown: Markdown component for React
Markdown component for React. Contribute to remarkjs/react-markdown development by creating an account on GitHub.
github.com
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
Beautiful typographic defaults for HTML you don't control.
tailwindcss.com
하이라이터 개발자모드 설치
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>
)
}
}}
/>
)
반응형
'UXUI Development > React.js' 카테고리의 다른 글
| Next.js 13 ESLint +Prettier 세팅 (0) | 2023.08.29 |
|---|
