변형 마크다운 문법

GFM (GitHub Flavored Markdown)

GitHub가 CommonMark 위에 올린 확장. 2017년 공식 명세 발표. 사실상 개발자 세계의 표준이 되었지만, 엄밀히는 비표준 확장이다.

GFM이 추가한 문법 (표준 마크다운에 없는 것):

• 표 (Tables) — | a | b | 형식
• 취소선 — ~~텍스트~~
• 작업 목록 — - [x] / - [ ]
• 자동 링크 — URL을 그냥 쓰면 자동으로 링크
• 멘션 / 이슈 참조 — @user, #123

자동 링크 (Autolink)

GFM에서는 URL을 < >로 감싸지 않아도 자동으로 링크가 된다.

표준: <https://github.com>
GFM:  https://github.com  (그냥 써도 링크 됨)

멘션 및 이슈 참조

GitHub 내에서만 작동하는 단축 참조 문법.

@username          → 사용자 프로필 링크
#123               → 이슈/PR #123 링크
owner/repo#456     → 다른 저장소의 이슈 참조
SHA (7자 이상)      → 커밋 링크

수식 (LaTeX Math)

원본 마크다운에는 전혀 없는 기능. MathJax 또는 KaTeX 라이브러리가 렌더링한다.

인라인: $E = mc^2$

블록:
$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

행렬:
$$
A = \begin{pmatrix}
a_{11} & a_{12} \\
a_{21} & a_{22}
\end{pmatrix}
$$

다이어그램 (Mermaid)

코드 블록에 mermaid 언어를 지정하면 다이어그램으로 렌더링. 2021년부터 GitHub에서 네이티브 지원.

```mermaid
graph LR
    A[마크다운] --> B[HTML 변환]
    B --> C[브라우저 렌더링]
```

지원 차트: flowchart, sequence, class, state, ER, gantt, pie, gitGraph, mindmap, timeline 등.

각주 (Footnotes)

본문에서 각주를 달 수 있다[^1]. 여러 개도 가능[^note].

[^1]: 첫 번째 각주 내용.
[^note]: 숫자 대신 이름도 된다.

TOC 자동 생성

마크다운 자체에는 목차 문법이 없다. 플랫폼마다 다른 방식을 쓴다.

프론트매터 (Front Matter)

마크다운 파일 맨 위에 YAML/TOML/JSON으로 메타데이터를 넣는 방식. 마크다운 "문법"은 아니지만, 사실상 필수 패턴이 되었다.

---
title: "글 제목"
date: 2026-04-02
tags: [markdown, tutorial]
draft: false
---

+++
title = "글 제목"
date = 2026-04-02
tags = ["markdown", "tutorial"]
draft = false
+++

접기/콜랩스 (Collapsible)

HTML <details> 태그를 활용. 마크다운 문법은 아니지만 대부분의 렌더러가 허용한다.

<details>
<summary>클릭하면 펼쳐집니다</summary>

숨겨진 내용. **마크다운도 됩니다.**

- 목록도 되고
- `코드`도 된다

</details>

Admonition / Callout 블록

경고, 팁, 정보 등을 시각적으로 구분하는 블록. 플랫폼마다 문법이 다르다.

> [!NOTE]
> 참고 사항입니다.

> [!WARNING]
> 주의가 필요합니다.

> [!TIP]
> 유용한 팁입니다.

> [!info] 제목
> 정보 내용

> [!warning] 경고
> 경고 내용

> [!tip]- 접을 수 있는 팁
> 접힌 내용

형광펜 / 하이라이트

등호 두 개로 감싸는 문법. 원본 마크다운에 전혀 없다.

==이 텍스트가 형광펜 처리됩니다==

GitHub에서는 HTML로 대체해야 한다: <mark>형광펜</mark>

속성 / 클래스 지정

요소에 CSS 클래스나 ID를 붙이는 문법. Pandoc, Kramdown 등에서 지원.

# 제목 {#custom-id .my-class}

이 단락에 스타일을 적용
{: .highlight .important}

![이미지](img.png){width=300}

HTML / CSS 직접 삽입

마크다운은 HTML 블록을 "허용"한다. 정확히 말하면 변형 문법이 아니라 원본 스펙의 기능이지만, 실무에서 확장 용도로 많이 쓰인다.

<!-- 가운데 정렬 -->
<div align="center">

![로고](logo.png)

**프로젝트 이름**

</div>

<!-- 색상 텍스트 (GitHub 지원) -->
<span style="color:red">빨간 글씨</span>  ← GitHub에서 무시됨!

<!-- GitHub에서 색상 쓰는 꼼수 -->
```diff
+ 추가된 줄 (초록)
- 삭제된 줄 (빨강)
! 경고 (주황)
```

Obsidian 전용 문법

Notion 고유 패턴

Notion은 마크다운을 "입력 단축키"로 쓰지만, 내부적으로는 자체 블록 구조를 사용한다.

Jupyter Notebook

Jupyter의 마크다운 셀은 표준 마크다운 + MathJax + HTML을 모두 지원한다.

# Jupyter 마크다운 셀에서 가능한 것들

일반 마크다운 + **HTML 태그** + $LaTeX$ 수식

<div style="background:#f0f0f0;padding:1rem">
  스타일도 된다 (Jupyter는 style 속성 허용)
</div>

$$\frac{\partial f}{\partial x} = 2x$$

플랫폼별 호환성 종합표

O = 지원, X = 미지원, 확장 = 플러그인/확장 설치 필요, 일부 = 부분 지원