내 MDX 페이지에 오신 것을 환영합니다!

이것은 굵은 글씨와 이탤릭 글씨입니다.

항목 하나
항목 둘
항목 셋

코드 예제 (rehype-prism 플러그인)

다양한 언어의 코드 하이라이팅을 테스트해보세요:

javascript

// JavaScript 예제
function greet(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to MDX, ${name}`;
}
 
greet('Developer');

python

# Python 예제
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
 
print(fibonacci(10))

css

/* CSS 예제 */
.highlight {
  background-color: #ffeb3b;
  padding: 2px 4px;
  border-radius: 3px;
}
 
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

bash

# Bash 예제
#!/bin/bash
echo "Hello World"
ls -la
npm install

GitHub Flavored Markdown 기능 (remark-gfm 플러그인)

테이블

기능	설명	상태
코드 하이라이팅	다양한 언어 지원	✅
자동 링크 헤딩	헤딩에 자동 링크 생성	✅
GFM 테이블	마크다운 테이블 지원	✅
체크박스	할일 목록	✅

체크박스 (Task Lists)

취소선

~~이 텍스트는 취소선이 그어집니다~~

자동 링크

URLs는 자동으로 링크가 됩니다: https://nextjs.org

이메일도 자동 링크: example@email.com

자동 링크 헤딩 (rehype-autolink-headings 플러그인)

아래 헤딩들은 자동으로 링크가 생성되어 앵커 링크로 사용할 수 있습니다:

섹션 1: 기본 기능

섹션 2: 고급 기능

섹션 3: 사용자 정의

JSX 컴포넌트와 함께 사용

이것은 JSX 컴포넌트와 Markdown이 함께 있는 MDX입니다!

수학 표현식 (선택적)

수학 표현식 예제:

인라인 수학: E = mc²

블록 수학:

text

∑(i=1 to n) i = n(n+1)/2

더 많은 코드 예제

TypeScript

typescript

interface User {
  id: number;
  name: string;
  email: string;
}
 
class UserService {
  private users: User[] = [];
 
  addUser(user: User): void {
    this.users.push(user);
  }
 
  getUser(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
}

React 컴포넌트

JSON

json

{
  "name": "weblog",
  "version": "1.0.0",
  "dependencies": {
    "next": "^14.0.0",
    "@next/mdx": "^14.0.0",
    "remark-gfm": "^3.0.1",
    "rehype-autolink-headings": "^7.1.0",
    "rehype-prism": "^0.0.1"
  }
}

인용구

이것은 인용구입니다.

여러 줄에 걸쳐 작성할 수 있습니다.

중첩 인용구도 가능합니다.

이모지

플러그인을 통해 이모지도 지원할 수 있습니다! 🎉 🚀 💻 ⚡

각주 (선택적 플러그인)

이것은 각주가 있는 텍스트입니다¹.

팁: 더 많은 플러그인을 추가하고 싶다면 next.config.mjs 파일에서 remarkPlugins와 rehypePlugins 배열에 새로운 플러그인을 추가하세요!

이것은 각주의 내용입니다. ↩

목차