KaTex를 사용하여 Nextjs로 수학 공식을 렌더링하는 방법은 무엇입니까?

9947 단어 nextjsreactmdxmath
다음은 Nextjs 프로젝트 내의 MDX 파일 내에 수학 공식을 구현할 수 있는 쉬운 방법입니다.

이를 위해 KaTex 수학 조판 라이브러리를 사용하고 contentlayer 파일 소스를 사용합니다.

예를 들어 피타고라스 정리의 공식을 렌더링합니다.

패키지 설치



Nextjs가 설정되었다고 가정하면 다음 패키지를 설치해야 합니다.
  • 콘텐츠 레이어 설치

    • yarn add contentlayer next-contentlayer


  • remark-math 및 rehype-katex 플러그인을 설치합니다.

    • yarn add remark-math rehype-katex


    콘텐츠 계층 구성


    next.config.js에서 withContentlayer로 구성 옵션을 래핑합니다.

    import { withContentlayer } from 'next-contentlayer'
export default withContentlayer({})


    프로젝트의 루트에서 파일contenlayer.config.js을 만들고 아래 구성을 추가합니다.

    import { defineDocumentType, makeSource } from 'contentlayer/source-files'

const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: { type: 'string', required: true },
  },
}))

export default makeSource({
  contentDirPath: 'posts',
  documentTypes: [Post]
})


    이 파일에서 문자열인 제목 필드로 문서 유형Post을 정의했습니다. contentDirPath는 contentlayer에게 소스 MDX 파일의 위치를 ​​알려줍니다.

    내용으로 정리 추가



    MDX 파일을 만듭니다posts/home.mdx.

    ---
title: "Pythagorean theorem"
---

a^2 + b^2 = c^2

a = side of right triangle
b = side of right triangle
c = hypotenuse


    렌더 홈 페이지


    /pages/index.js에 아래 코드를 추가합니다.

    import { useMDXComponent } from 'next-contentlayer/hooks';
import { allPages } from 'contentlayer/generated';

export const getStaticProps = () => {
  const page = allPages.find((page) => page._raw.sourceFileName === "home.mdx")
  return { props: { page } }
}

export default function HomePage({ page }) {
  const MDXContent = useMDXComponent(page.body.code)

  return (
    <div>
      <h1>{page.title}</h1>
      <MDXContent />
    </div>
  )
}


    렌더링 수식



    거의 다 왔습니다! 앱을 부팅하면 렌더링 중임을 알 수 있습니다a^2 + b^2 = c^2. 대신 다음과 같은 수식을 렌더링하려고 합니다.



    작동하게 하려면 contentlayer 구성에 remark-math 및 rehype-katex를 추가하십시오.

    import { makeSource } from 'contentlayer/source-files';
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

export default makeSource({
  // ...
  mdx: { 
    remarkPlugins: [remarkMath], 
    rehypePlugins: [rehypeKatex],
  },
})


    플러그인은 KaTex를 HTML로 변환합니다. 수식의 스타일을 지정하려면 CSS 파일을 로드해야 합니다.

    import Head from "next/head";

export default function HomePage({ page }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossOrigin="anonymous">
      </Head>
      ...
    </>
  )
}


    이것이 바로 MDX에서 KaTex를 구현한 것입니다.
    【Git】자신의 계정만으로 풀릭의 연습을 해보자(pull request)
    자동화된 테스트에서 Node.js 디버깅

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage