) - pre 안에 없는 경우만 */
+.markdown-content :not(pre) > code {
+ font-size: 0.875rem;
+ font-family: var(--md-code-font-family);
+ background-color: var(--md-code-inline-bg);
+ color: var(--md-code-text);
+ padding: 0.125rem 0.375rem;
+ border: 1px solid var(--md-code-inline-border);
+ border-radius: 4px;
+ white-space: nowrap;
+}
+
+/* Element (논리적): 코드 블록 컨테이너 () - 자손 셀렉터 사용 */
+.markdown-content pre {
+ padding: 1.25rem; /* 20px - 1rem(16px)에서 증가: 내부 여유 공간 확보 */
+ background-color: var(--md-code-bg);
+ border: 1px solid var(--md-code-border);
border-radius: 8px;
overflow-x: auto;
line-height: 1.5;
- margin-bottom: 0.5rem;
+ margin-top: var(--md-spacing-lg); /* 24px - 1rem(16px)에서 증가 */
+ margin-bottom: var(--md-spacing-lg); /* 24px - 1rem(16px)에서 증가 */
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
-#content pre code {
- display: block;
- background: #fff;
- color: #000000;
- white-space: pre-wrap;
+/* Contextual spacing - 제목 바로 다음 코드 블록 */
+.markdown-content > h2 + pre,
+.markdown-content > h3 + pre,
+.markdown-content > h4 + pre {
+ margin-top: var(--md-spacing-md); /* 16px - 제목과 가까이 */
}
-#content code {
- font-size: 13px;
- background-color: #e1e2e6;
- color: #000000;
- padding: 2px 6px;
- border-radius: 4px;
- white-space: nowrap;
+/* Contextual spacing - 코드 블록 바로 다음 제목 */
+.markdown-content > pre + h2,
+.markdown-content > pre + h3,
+.markdown-content > pre + h4 {
+ margin-top: var(--md-spacing-3xl); /* 48px - 섹션 전환 명확화 */
}
-/* ========================================
- 기타 요소
- ======================================== */
+/* Dark mode 추가 조정 */
+@media (prefers-color-scheme: dark) {
+ .markdown-content pre {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+ }
+}
-#content > blockquote {
- border-left: 4px solid #007bff;
- padding: 0.75rem 1rem;
- margin: 1rem 0;
- background-color: #f8f9fa;
- font-style: italic;
- color: #555;
+/* Element (논리적): 코드 블록 내부 텍스트 () - 인라인 스타일 오버라이드 */
+.markdown-content pre code {
+ display: block;
+ background: transparent;
+ color: var(--md-code-text);
+ white-space: pre;
+ font-family: var(--md-code-font-family);
+ font-size: 0.875rem;
+ line-height: 1.6;
+ padding: 0;
+ border: none;
+ border-radius: 0;
}
-#content > a {
- color: #007bff;
+/* ========================================
+ 링크 스타일
+ Note: visited 링크도 동일한 색상 유지 (보라색 변경 없음)
+ ======================================== */
+
+/* 모든 하위 링크에 기본 스타일 적용 */
+.markdown-content a {
+ color: var(--md-link-color);
text-decoration: none;
transition: color 0.2s ease-in-out;
}
-#content > a:hover {
- color: #007bff;
+.markdown-content a:hover {
+ color: var(--md-link-color-hover);
+}
+
+/* visited 링크도 동일한 파란색 유지 */
+.markdown-content a:visited {
+ color: var(--md-link-color);
+}
+
+/* 키보드 네비게이션 접근성 */
+.markdown-content a:focus-visible {
+ outline: 2px solid var(--md-link-color);
+ outline-offset: 2px;
+ border-radius: 2px;
}
-#content > a.external-link::after {
+/* 외부 링크 아이콘 */
+.markdown-content a.external-link::after {
content: ' 🔗';
font-size: 0.8em;
opacity: 0.7;
}
-/* 문단 내 링크 */
-#content p a {
- color: #007bff;
- text-decoration: none;
- transition: color 0.2s ease-in-out;
+/* ========================================
+ 인용구 (blockquote)
+ 원칙: 코드 블록과 동일한 상하 여백, 내부는 밀도 높게
+ ======================================== */
+
+.markdown-content > blockquote {
+ border-left: 4px solid #007bff;
+ padding: var(--md-spacing-md) 1.25rem; /* 상하 16px, 좌우 20px */
+ margin-top: var(--md-spacing-lg); /* 24px */
+ margin-bottom: var(--md-spacing-lg); /* 24px */
+ background-color: #f8f9fa;
+ font-style: italic;
+ color: #555;
+}
+
+/* blockquote 내부 문단 간격 */
+.markdown-content > blockquote > p {
+ margin-bottom: var(--md-spacing-sm); /* 12px - 인용구 내부는 밀도 높게 */
}
-#content p a:hover {
- color: #0056b3;
+.markdown-content > blockquote > p:last-child {
+ margin-bottom: 0; /* 마지막 문단은 여백 제거 */
}
+/* ========================================
+ 기타 요소
+ ======================================== */
+
/* YouTube 임베드는 클래스 기반이므로 그대로 */
-#content .youtube-video {
+.markdown-content .youtube-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
- max-height: auto;
}
-#content .youtube-video iframe {
+.markdown-content .youtube-video iframe {
position: absolute;
top: 0;
left: 0;
diff --git a/tests/markdown.test.ts b/tests/markdown.test.ts
index 273cc8f..00fdbd3 100644
--- a/tests/markdown.test.ts
+++ b/tests/markdown.test.ts
@@ -27,7 +27,7 @@ afterAll(() => {
beforeEach(() => {
document = testEnv.document;
- document.body.innerHTML = '';
+ document.body.innerHTML = '';
contentElement = document.getElementById('content')!;
});
diff --git a/tests/table-contents.test.ts b/tests/table-contents.test.ts
index 5f08922..d3d6a76 100644
--- a/tests/table-contents.test.ts
+++ b/tests/table-contents.test.ts
@@ -25,7 +25,7 @@ beforeAll(async () => {
testMarkdownContent = await marked.parse(rawMarkdown);
dom = new JSDOM(
- ''
+ ''
);
// JSDOM 글로벌 환경 설정
@@ -47,7 +47,8 @@ beforeAll(async () => {
beforeEach(() => {
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
document = (global as any).document;
- document.body.innerHTML = '';
+ document.body.innerHTML =
+ '';
contentElement = document.getElementById('content')!;
tocElement = document.getElementById('toc')!;