KaTex와 remark-math를 이용해 astro markdown page에서 수식을 렌더링하자.

Published: at 오후 05:14

Table of contents

Open Table of contents

들어가며

컴퓨터네트워크 시험 공부를 astro markdown page에 정리하고, 이를 블로그에 배포하면서 하고 있었다. 그런데 배포한 블로그에 들어가서 post를 보니, 수식이 제대로 렌더링이 안 돼 있었다, 그래서 이를 해결하고자 한다.

package 설치

현재 내 블로그 프로젝트에 npm package로 하기 명령어에 나와 있는 패키지들을 설치한다. 저 두 패키지가 뭐냐하면은…

npm install remark-math rehype-katex

astro.config.mjs 파일 수정

하기와 같이 수정한다.

remarkPlugins에 remarkMath를 추가하고, rehypePlugins에 rehypeKatex를 추가하면 되는 간단한 작업이다.

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import remarkToc from "remark-toc";
import remarkCollapse from "remark-collapse";
import sitemap from "@astrojs/sitemap";
import {
  updateImageLinkNode,
  updateLinkNode,
} from "./src/utils/updateMarkdownASTNodeURLValue";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
// https://astro.build/config
export default defineConfig({
  site: "https://gyunseo.xyz", // replace this with your deployed dom:wain
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
    react(),
    sitemap(),
  ],
  markdown: {
    remarkPlugins: [
      remarkToc,
      // to support a math syntax in markdown
      remarkMath,
      [
        remarkCollapse,
        {
          test: "Table of contents",
        },
      ],
      // update Markdown ImageLink Node URL Value,
      updateImageLinkNode,
      // convert Markdown Link Node URL Value,
      updateLinkNode,
    ],
    // to render math in HTML with KaTex
    rehypePlugins: [rehypeKatex],
    shikiConfig: {
      theme: "one-dark-pro",
      wrap: true,
    },
    extendDefaultPlugins: true,
  },
  vite: {
    optimizeDeps: {
      exclude: ["@resvg/resvg-js"],
    },
  },
  scopedStyleStrategy: "where",
});

Layout.astro에 KaTex stylesheet 추가하기

head tag 안에 하기 코드를 추가하자.

<head>
  <!-- Katex -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css"
    integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
    crossorigin="anonymous"
  />
</head>

결과

잘 나온다.

참고 문서