커스텀 마크다운 기능 4가지 가이드

이 포스트는 블로그에 새로 추가된 4가지 커스텀 마크다운 기능을 소개하고 테스트합니다.

1. Callouts / Admonitions

GitHub 스타일의 callout 블록입니다. > [!TYPE] 문법을 사용합니다.

Note

이것은 NOTE callout입니다. 일반적인 정보나 참고 사항을 전달할 때 사용합니다.

Tip

이것은 TIP callout입니다. 유용한 팁이나 권장 사항을 공유할 때 사용합니다.

Important

이것은 IMPORTANT callout입니다. 반드시 알아야 할 중요한 정보를 강조할 때 사용합니다.

Warning

이것은 WARNING callout입니다. 주의가 필요한 상황이나 잠재적 문제를 알릴 때 사용합니다.

Caution

이것은 CAUTION callout입니다. 잘못 사용하면 문제가 생길 수 있는 작업에 사용합니다.

2. 코드블록 강화

파일명/타이틀 표시

import { serialize } from "next-mdx-remote/serialize";
 
export function serializeMdx(source: string) {
  return serialize(source, {
    mdxOptions: {
      format: "mdx",
    },
  });
}

라인 하이라이팅

특정 라인을 {숫자} 또는 {시작-끝} 으로 강조할 수 있습니다.

function greet(name) {
  const message = `Hello, ${name}!`; // 이 줄이 강조됩니다
  console.log(message);
  return message; // 이 줄도 강조됩니다
} // 이 줄도 강조됩니다

라인 번호 표시

showLineNumbers 메타 옵션으로 라인 번호를 표시할 수 있습니다.

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}
 
function createUser(name: string, email: string): User {
  return {
    id: crypto.randomUUID(),
    name,
    email,
    createdAt: new Date(),
  };
}

3. Collapsible 섹션

HTML <details> 태그를 사용해 접을 수 있는 섹션을 만들 수 있습니다.

// next-mdx-remote를 사용한 MDX 직렬화 전체 예시
import { serialize } from "next-mdx-remote/serialize";
import rehypePrettyCode from "rehype-pretty-code";
import remarkGfm from "remark-gfm";
 
const prettyCodeOptions = {
  theme: {
    dark: "github-dark",
    light: "github-light",
  },
};
 
export function serializeMdx(source: string) {
  return serialize(source, {
    mdxOptions: {
      remarkPlugins: [remarkGfm],
      rehypePlugins: [
        [rehypePrettyCode as any, prettyCodeOptions],
      ] as any,
      format: "mdx",
    },
  });
}

4. Tabs 컴포넌트

같은 내용을 여러 언어/방법으로 보여줄 때 유용합니다.

interface Config {
  apiUrl: string;
  timeout: number;
  retries: number;
}
 
async function fetchData(config: Config): Promise<Response> {
  const controller = new AbortController();
  const timeoutId = setTimeout(
    () => controller.abort(),
    config.timeout
  );
 
  try {
    const response = await fetch(config.apiUrl, {
      signal: controller.signal,
    });
    return response;
  } finally {
    clearTimeout(timeoutId);
  }
}

패키지 관리자별 설치 명령어도 탭으로 정리할 수 있습니다.

pnpm add next-mdx-remote remark-gfm rehype-pretty-code

정리

Tip

모든 기능은 라이트/다크 모드를 지원합니다. 우측 상단의 토글로 확인해보세요.