github-markdown-css

github-markdown-css는 GitHub가 렌더링된 Markdown에 적용하는 시각적 스타일을 최소한의 CSS만으로 재현하는 것을 목표로 하는 작은 CSS 패키지입니다. 스타일시트는 수동 편집이 아닌 생성 방식으로 만들어지며, README는 기여를 별도의 generate-github-markdown-css 저장소로 안내합니다. 사용법은 간단합니다. github-markdown.css를 가져오고, 렌더링된 Markdown을 담는 컨테이너에 markdown-body 클래스를 추가한 뒤 너비를 설정하면 됩니다. README는 GitHub가 980px 너비에 45px 패딩을 사용하고 모바일에서는 15px 패딩을 사용한다고 언급하며, box-sizing, min-width, max-width, margin auto, 그리고 좁은 뷰포트를 위한 미디어 쿼리가 포함된 예제를 제공합니다. 또한 prefers-color-scheme을 통한 다크 모드 배경색도 보여줍니다. 이 패키지는 7가지 테마를 제공합니다: prefers-color-scheme을 통해 라이트/다크를 자동 전환하는 기본 테마, 라이트 전용, 다크 전용, 다크 딤드(dimmed), 다크 고대비, 다크 색각 이상(프로타노피아 및 듀테라노피아), 라이트 색각 이상 변형입니다. 이 스타일에 맞는 HTML을 얻으려면 README는 GitHub의 /markdown API를 제안하는데, 이 API는 GitHub 자체가 생성하는 HTML을 만들어냅니다. 다른 Markdown 파서도 대부분 이 스타일과 잘 작동한다고 언급하며, GitHub의 코드 하이라이팅을 모방한 starry-night를 권장합니다. 설치 옵션으로는 파일을 수동으로 다운로드하거나, CDNJS를 사용하거나, npm install github-markdown-css를 실행하는 방법이 있습니다. 데모 페이지 링크도 포함되어 있습니다. 문제 해결 노트에서는 다크 모드에서 테이블 글꼴이 검게 보이는 등의 스타일 문제가 브라우저가 쿼크 모드(quirks mode)로 전환되어 발생할 수 있다고 설명하며, 페이지 상단에 doctype을 포함하면 이를 피할 수 있다고 안내합니다. 개발 시에는 npm run make 명령으로 CSS를 업데이트합니다.