# 마크다운 고급 기능 완벽 가이드
SvelteKit과 mdsvex를 사용하면 마크다운의 모든 고급 기능을 활용할 수 있습니다. 이 가이드에서는 실제 예제와 함께 모든 기능을 살펴보겠습니다.
## 기본 마크다운 문법
### 텍스트 서식
**굵은 글씨**와 *기울임 글씨*를 사용할 수 있습니다.
`인라인 코드`와 다음과 같은 코드 블록도 지원됩니다:
```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
return `Welcome to ${name}'s blog!`;
}
greet('Chirpy');
```
### 링크와 이미지
[Chirpy 공식 사이트](https://chirpy.cotes.page)를 방문해보세요.
## 수학 표현식 (KaTeX)
### 인라인 수식
물리학의 기본 방정식은 $F = ma$입니다.
### 블록 수식
$$
\begin{equation}
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
\end{equation}
$$
### 복잡한 수학
행렬과 벡터도 표현할 수 있습니다:
$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
\begin{pmatrix}
x \\
y
\end{pmatrix}
=
\begin{pmatrix}
ax + by \\
cx + dy
\end{pmatrix}
$$
## Mermaid 다이어그램
### 플로우차트
```mermaid
graph TD
A[시작] --> B{조건 확인}
B -->|참| C[실행 A]
B -->|거짓| D[실행 B]
C --> E[종료]
D --> E
```
### 시퀀스 다이어그램
```mermaid
sequenceDiagram
participant 사용자
participant 브라우저
participant 서버
사용자->>브라우저: 요청
브라우저->>서버: HTTP 요청
서버->>브라우저: 응답
브라우저->>사용자: 결과 표시
```
### 간트 차트
```mermaid
gantt
title 프로젝트 일정
dateFormat YYYY-MM-DD
section 설계
요구사항 분석 :done, des1, 2024-01-01, 2024-01-03
시스템 설계 :done, des2, 2024-01-04, 2024-01-07
section 개발
프론트엔드 :active, dev1, 2024-01-08, 2024-01-15
백엔드 :dev2, 2024-01-10, 2024-01-18
section 테스트
단위 테스트 :test1, 2024-01-16, 2024-01-20
통합 테스트 :test2, 2024-01-19, 2024-01-22
```
## 표 (Table)
| 기능 | Jekyll | SvelteKit | 장점 |
|------|--------|-----------|------|
| 빌드 속도 | 느림 | 빠름 | Vite 기반 |
| 타입 안전성 | 없음 | 완전 지원 | TypeScript |
| 컴포넌트 | Liquid | Svelte | 재사용성 |
| 상태 관리 | 제한적 | 강력함 | Runes API |
## 목록 (Lists)
### 순서 있는 목록
1. 프로젝트 초기 설정
2. 디렉토리 구조 생성
3. 타입 정의
4. 컴포넌트 구현
5. 콘텐츠 파이프라인 구축
### 순서 없는 목록
- SvelteKit 설치
- TailwindCSS 설정
- shadcn-svelte 추가
- mdsvex 구성
- 배포 설정
### 중첩 목록
- 개발 환경
- Node.js 18+
- pnpm 또는 npm
- VS Code
- 필수 확장
- Svelte for VS Code
- Tailwind CSS IntelliSense
- TypeScript Importer
## 인용문 (Blockquotes)
> "The best way to predict the future is to implement it."
>
> — David Heinemeier Hansson
> **참고사항**: 이 가이드는 SvelteKit 2.x와 mdsvex 0.12+를 기준으로 작성되었습니다.
## 수평선
---
이렇게 마크다운의 모든 기능을 활용할 수 있습니다.
## 코드 하이라이팅
### JavaScript
```javascript
class BlogPost {
constructor(title, content, date) {
this.title = title;
this.content = content;
this.date = date;
}
get readingTime() {
const wordsPerMinute = 200;
const wordCount = this.content.split(' ').length;
return Math.ceil(wordCount / wordsPerMinute);
}
}
```
### TypeScript
```typescript
interface PostFrontmatter {
title: string;
date: string;
categories: string[];
tags: string[];
math?: boolean;
mermaid?: boolean;
}
type PostStatus = 'draft' | 'published' | 'archived';
```
### CSS
```css
.post-card {
@apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
.post-title {
@apply text-xl font-bold text-gray-900 dark:text-white;
}
.post-meta {
@apply text-sm text-gray-600 dark:text-gray-400;
}
}
```
## 결론
mdsvex를 사용하면 마크다운의 모든 고급 기능을 SvelteKit에서 활용할 수 있습니다. 수학 표현식, 다이어그램, 코드 하이라이팅 등 모든 기능이 완벽하게 작동합니다.
이러한 기능들을 활용하여 더욱 풍부하고 인터랙티브한 블로그 콘텐츠를 만들 수 있습니다.