마크다운 · 커스텀 문법 렌더링 테스트

쓰여진: July 29, 2026

이 글은 스타일 확인용입니다.
각 항목이 어두운 배경에 맞게 렌더링되는지 눈으로 대조하기 위한 것으로, 내용 자체에는 의미가 없습니다.

1. 제목

H1 제목

H2 제목

H3 제목

H4 제목

H5 제목

H6 제목

2. 텍스트 강조

굵게 / 기울임 / 굵은 기울임
~~취소선~~ / 인라인 코드
마크 하이라이트 / 밑줄 / 작은 글씨

물 분자는 H₂O, 제곱은 x² 입니다.

복사는 Ctrl + C, 붙여넣기는 Ctrl + V.

3. 줄바꿈

이 블로그는 kramdown.hard_wrap: true 라서
줄 끝에 공백 두 개를 안 넣어도
이렇게 줄이 바뀝니다.

여기는 빈 줄을 넣었으므로 새 문단입니다.

4. 목록

순서 없는 목록

첫 번째 항목
두 번째 항목
- 중첩 1단계
- 중첩 1단계
  - 중첩 2단계
세 번째 항목

순서 있는 목록

첫 번째
두 번째
1. 중첩 1단계
2. 중첩 1단계
세 번째

혼합 목록

순서 있는 항목
- 그 안의 순서 없는 항목
- 또 하나
다음 항목

작업 목록

체크 안 됨
체크 됨

정의 목록

장3도: 반음 4개만큼 떨어진 음정
단3도: 반음 3개만큼 떨어진 음정

5. 링크

인라인 링크
제목이 붙은 링크
참조 링크
자동 링크: https://thereisnofate.takecontr.lol
같은 페이지 앵커: 9번 항목으로
사이트 내부 링크: 게시물 목록

6. 이미지

기본 이미지:

3화음 목록

figure include (캡션 + 클릭 시 확대):

7. 인용문

기본 인용문입니다.
두 번째 줄입니다.

첫 번째 문단입니다.

빈 줄로 나눈 두 번째 문단입니다.

바깥 인용문

중첩된 인용문

2단계 중첩

인용문 안의 목록:

항목 하나

항목 둘

인용문 안의 인라인 코드.

8. 구분선

위쪽 문단입니다.

아래쪽 문단입니다.

9. 코드

인라인 코드는 fdisk -l 처럼 씁니다.

언어 없는 코드블록:

언어를 지정하지 않은 블록입니다.
들여쓰기도    그대로    유지됩니다.

bash 하이라이팅:

#!/bin/bash
# 디스크 확인
fdisk -l | grep "^/dev"
for i in {1..3}; do
  echo "count: $i"
done

ruby 하이라이팅:

class Chord
  attr_reader :root, :quality

  def initialize(root, quality = :major)
    @root, @quality = root, quality
  end

  def to_s = "#{@root}#{@quality == :minor ? 'm' : ''}"
end

yaml 하이라이팅:

title: "서원근양학블로그"
kramdown:
  hard_wrap: true
plugins:
  - jekyll-feed
  - jekyll-sitemap

들여쓰기(4칸) 코드블록:

이것도 코드블록입니다.
백틱 없이 4칸 들여쓰기로 만듭니다.

10. 표

기본 마크다운 표

음정	반음 수	비고
완전1도	0	같은 음
장2도	2
장3도	4	밝은 느낌
완전5도	7	가장 안정적

정렬 지정 (기본 문법)

왼쪽	가운데	오른쪽
a	b	c
조금 긴 내용	가운데 정렬	123

fancy-tables — 정렬

코드	표기법	구성음
C Major	CM, C	도-미-솔
C minor	Cm, C-	도-미♭-솔
C augmented	Caug, C+	도-미-솔♯

fancy-tables — colspan

셀 뒤에 백슬래시(\)를 붙인 개수 + 1 만큼 옆 칸과 합쳐집니다.
합쳐지는 칸은 아예 적지 않고 행을 짧게 끝냅니다.

구분	장3도	단3도
아래는 두 3도를 쌓은 결과
장3도	augmented	Major
단3도	minor	diminished

fancy-tables — rowspan

아래 칸을 ^^ 로 시작하면 위 칸과 세로로 합쳐집니다.

조성	조표	으뜸음
올림표 계열	♯ 1개	G
	♯ 2개	D
	♯ 2개	♯ 3개	A
내림표 계열	♭ 1개	F
내림표 계열	♭ 2개	B♭

fancy-tables 원본 문법

```table
| 헤더1 | 헤더2 |
| --- | --- |
| 셀 | 셀 |
```alignment
LC
```

alignment 블록의 글자는 열 순서대로 L(왼쪽) · C(가운데) · R(오른쪽) 입니다.

11. 접기 (details)

클릭해서 펼치기

접힌 안쪽 내용입니다.
HTML 태그라 마크다운이 아니라 <br> 로 줄을 바꿔야 합니다.

markdown="1" 을 붙인 경우

kramdown은 HTML 블록 안을 기본적으로 마크다운으로 해석하지 않습니다. markdown="1" 을 붙여야 아래가 동작합니다.

목록도 되고
강조도 됩니다

markdown="1" 없이 마크다운을 넣은 경우

- 이 목록은 아마 그대로 글자로 나올 것입니다 - **이 강조**도 마찬가지입니다

12. 각주

각주를 다는 방법입니다¹. 두 번째 각주도 달아봅니다².

13. 약어

HTML 과 CSS 위에 마우스를 올려보세요.

14. 알림 상자 (minimal-mistakes)

기본 알림 상자입니다.

primary 알림 상자입니다.

info 알림 상자입니다.

warning 알림 상자입니다.

success 알림 상자입니다.

danger 알림 상자입니다.

15. 버튼 (minimal-mistakes)

기본 버튼
primary
success
warning
danger
info
큰 버튼
작은 버튼

16. 정렬 클래스 (minimal-mistakes)

가운데 정렬된 문단입니다.

오른쪽 정렬된 문단입니다.

양쪽 정렬된 문단입니다. 길이를 채우기 위해 문장을 조금 더 이어 붙입니다. 이 정도면 두 줄은 넘어갈 것 같습니다.

17. 영상 임베드

YouTube:

niconico:

vimeo · bilibili · google-drive 도 같은 방식으로 씁니다.
bilibili 는 danmaku="1" 로 탄막을 켤 수 있습니다.

18. 여백 (spacer)

아래에 32+16 픽셀 여백이 들어갑니다.

여백 뒤의 문단입니다.

19. 수식 (MathJax)

인라인 수식: $E = mc^2$ 입니다.

디스플레이 수식($$):

\[f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi)\, e^{2\pi i \xi x} \, d\xi\]

디스플레이 수식(대괄호 표기):

[
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
]

위 대괄호 표기는 kramdown이 \[ 를 이스케이프로 먹어버릴 수 있습니다.
head/custom.html 의 MathJax 로딩 조건이 \[ · \] 포함 여부라서, 이 항목이 안 나오면 조건 자체를 $$ 기준으로 바꿔야 합니다.

행렬:

\[\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}\]

20. HTML 직접 삽입

인라인 스타일을 준 div 입니다.

<p align="center"> 로 가운데 정렬한 문단입니다.

21. 이스케이프

첫 번째 각주 내용입니다. ↩
이름을 붙인 각주입니다. 링크도 들어갑니다. ↩