콘텐츠로 이동

mkdocs 관련 내용을 작성합니다.

✍️ 작성자: Heesung Jin (kage2k)
📅 마지막 업데이트: 2025-06-01
🔄 버전: v1.0

📞 도움이 필요하신가요?

스크립트 사용 중 문제가 발생하거나 개선 제안이 있으시다면:

머리말

해당 문서는 mkdocs 를 사용하면서 잊지 않기 위해서 남기는 문서 입니다. 현재 시스템에 적용된 것입니다.

📘 MkDocs Material 마크다운 문법 & 확장 기능 정리

✅ 1. 기본 마크다운 문법

기능 문법 예시 결과
제목 # 제목1, ## 제목2 제목 생성
글머리 - 항목, * 항목 리스트 생성
번호 리스트 1. 항목 번호 리스트 생성
굵은 글씨 **굵게** 굵게
기울임 *기울임* 기울임
코드블럭 `코드` 코드
블록코드 js\n코드\n 여러줄 코드
링크 [Google](https://google.com) Google
이미지 ![설명](img.png) 이미지 표시
인용 > 인용문 인용문 표시

🧩 2. Material 확장 기능 문법

2.1 경고 / 정보 상자

1
2
3
4
5
!!! note "메모 제목"
    이건 노트입니다.

!!! warning "주의"
    이건 경고입니다.

➡️ mkdocs.yml에 아래 설정 필요:

1
2
markdown_extensions:
  - admonition

2.2 탭 기능

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
=== "Python"

    ```python
    print("Hello Python")
    ```

=== "JavaScript"

    ```js
    console.log("Hello JS");
    ```

➡️ 설정:

1
2
3
markdown_extensions:
  - pymdownx.tabbed:
      alternate_style: true

2.3 체크리스트 (할 일 목록)

1
2
- [ ] 해야 할 일
- [x] 완료한 일

➡️ 설정:

1
2
3
markdown_extensions:
  - pymdownx.tasklist:
      custom_checkbox: true

2.4 접기 기능 (코드, 노트 등)

1
2
??? note "접기 가능한 노트"
    여기에 접히는 내용을 작성하세요.

➡️ 설정:

1
2
markdown_extensions:
  - pymdownx.details

2.5 수식(LaTeX)

1
2
3
$$
E = mc^2
$$

➡️ 설정:

1
2
3
4
5
6
markdown_extensions:
  - pymdownx.arithmatex
extra_javascript:
  - https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js
extra_css:
  - https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css

🛠️ mkdocs.yml 기본 설정 예시

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
site_name: 내 문서
theme:
  name: material
markdown_extensions:
  - admonition
  - pymdownx.tabbed:
      alternate_style: true
  - pymdownx.tasklist:
      custom_checkbox: true
  - pymdownx.details
  - pymdownx.arithmatex
extra_javascript:
  - https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js
extra_css:
  - https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css

🔚 마무리

이 문서만 있으면 MkDocs Material에서 자주 쓰이는 마크다운 기능과 설정을 쉽게 적용할 수 있어요!
자주 쓰이는 문법을 복붙해서 템플릿처럼 활용해 보세요. 😎