Kang-ji

react-markdown , remark-gfm 설치

npm i react-markdown remark-gfm

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

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

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

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>
        )
      }
    }}
  />
)

.eslintrc.json 

prettier

npm install --save-dev prettier

npm install --save-dev eslint-config-prettier

touch .prettierrc.json

.prettierrc.json

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

.eslintrc.json

{
  "extends": ["next", "prettier"]
}

npm i --save-dev @typescript-eslint/eslint-plugin

최종

.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error", // 사용되지 않는 변수를 에러로 인식
    "@typescript-eslint/no-explicit-any": "error" // any 타입 정의를 에러로 인식
  }
}

package.json

 "dependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.4.19",
    "@typescript-eslint/eslint-plugin": "^6.5.0",
    "eslint-config-prettier": "^9.0.0",
    "prettier": "^3.0.2"
  }

참고자료

https://github.com/prettier/eslint-config-prettier

https://gist.github.com/Nivethan-Ar/2375bf451d4c30148916b59c7e0c51c0

https://findmypiece.tistory.com/203

https://velog.io/@2taesung/Next.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0