Next.js 시작하기3 - 스타일링

1. 라이브러리 설치

 yarn add @sanity/block-content-to-react
 yarn add react-syntax-highlighter

 

2. BlogPostDetail.jsx

import {Col, Row } from 'antd'
import BlockContent from '@sanity/block-content-to-react'
import SyntaxHighlighter from 'react-syntax-highlighter'

const serializers = {
  types: {
    code: ({node}) => {
      const { code } = node;
      return (
        <SyntaxHighlighter 
          language="javascript" 
          style={{"hljs": {color: 'red',}}}
        >{code}</SyntaxHighlighter>
      )
    },
    video: ({ node }) => {
      return <p>video</p>
    },
    link: ({ node }) => {
      return <p>link</p>
    },
    imageGallery: ({ node }) => {
      return <p>imageGallery</p>
    },
  }
}

export default function BlogPostDetail({blocks}) {
  return (
    <>
      <Col span={24}>
        <BlockContent 
          blocks={blocks}
          projectId= {process.env.SANITY_PROJECT_ID}
          dataset="production"  
          serializers={serializers}
        />
      </Col>
    </>
  )
}