Skip to content

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

Published: at 오후 05:14Suggest Changes

Table of contents

Open Table of contents

들어가며

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

package 설치

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

npm install remark-math rehype-katex

astro.config.mjs 파일 수정

하기와 같이 수정한다.

remarkPluginsremarkMath를 추가하고, rehypePluginsrehypeKatex를 추가하면 되는 간단한 작업이다.

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.com", // replace this with your deployed domain
  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/[email protected]/dist/katex.min.css"
    integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
    crossorigin="anonymous"
  />
</head>

결과

잘 나온다.

참고 문서


Previous Post
Data Communications and Networking Chapter 4 LANs Fast Ethernet
Next Post
Data Communications and Networking Chapter 4 LANs Standard Ethernet