이 페이지는 단일 기능이 아니라, 렌더링 경계 전체를 흔들어 보는 테스트다.
목표는 “문법이 되는가”가 아니라 “업그레이드 후에도 같은 출력이 유지되는가”다.

1) 기본 마크다운

  • 순서 없는 목록
  • 두 번째 항목
    • 중첩 목록
    • 중첩 목록 안의 inline code
  • task list 형태
  • 완료 상태도 렌더링되는지 확인
  1. 순서 있는 목록
  2. 다음 항목
  3. 마지막 항목

blockquote는 줄바꿈, 인용, 문단 간격을 같이 확인하기 좋다.

2) 표, 각주, 굵게, 기울임, 취소선

항목 예시 확인 포인트
굵게 bold strong 태그 스타일
기울임 italic em 태그 스타일
취소선 strike del 태그 스타일
각주 본문1 각주 렌더링
코드 code 인라인 코드 배경

3) 접기/펼치기 shortcode

접기/펼치기 테스트: 마크다운이 내부에서 유지되어야 한다
  • 내부 목록
  • 굵은 글씨
  • code fence 대신 plain markdown

4) 인라인 이미지 shortcode

문장 사이에 인라인 아이콘 작은 아이콘이 들어가도 줄 높이가 급격히 깨지지 않아야 한다.

5) 방향성 테스트

LTR sample — The quick brown fox jumps over the lazy dog. This block should stay left-to-right even if the page language is Korean.
RTL sample — مرحبًا بالعالم.
이 블록은 오른쪽에서 왼쪽으로 흐르는 텍스트가 레이아웃을 밀어내지 않는지 본다.

6) raw HTML shortcode

rawhtml 출력 테스트

마크다운 렌더러가 아니라 순수 HTML이 들어와도 테마가 같은 톤으로 처리하는지 확인한다.

7) 코드 블록 언어별 하이라이트

[params.design]
pageMaxWidth = "1024px"
contentMaxWidth = "720px"
gap = "24px"

title: theme-upgrade-lab
tags:
  - markdown
  - shortcode
  - render-hook

<section class="probe">
  <h2>HTML block</h2>
  <p>표준 HTML 요소가 theme typography와 충돌하지 않아야 한다.</p>
</section>

function sampleThemeProbe() {
  const tokens = ["pageMaxWidth", "contentMaxWidth", "gap"];
  return tokens.join(", ");
}

8) figure shortcode

마크다운과 shortcode 렌더링 샘플
figure shortcode 테스트

caption, title, link, attr, width/height가 모두 먹히는지 확인한다. 검증용

9) 추가 경계값

  • kbd는 Ctrl + K처럼 보이는가
  • sup와 sub는 x^2와 H2O 같은 표기를 깨지 않는가
  • mark는 강조 배경이 너무 튀지 않는가
  • <details>와 <summary>가 중첩 마크다운을 품는가
  • 세부 목록
  • inline code
  • badge

이 페이지는 “기능이 동작한다”가 아니라 “업그레이드 후에도 같은 결과가 나온다”를 증명하는 용도다.

  1. 각주는 본문과 분리되어도 링크와 번호가 유지되어야 한다. ↩︎