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で自動的にライト/ダークを切り替えるデフォルト、ライトのみ、ダークのみ、ダークディムド、ダークハイコントラスト、ダーク色覚異常（プロタノピアとジュータノピア）、ライト色覚異常の各バリエーションです。 これらのスタイルに一致するHTMLについては、READMEがGitHubの/markdown APIを推奨しており、これはGitHub自身が生成するHTMLを出力します。他のMarkdownパーサーでも大半はスタイルが機能するとし、GitHub風のコードハイライトにはstarry-nightを推奨しています。 導入方法は、ファイルの手動ダウンロード、CDNJSの利用、またはnpm install github-markdown-cssのいずれかです。デモページへのリンクもあります。 トラブルシューティングの注意点として、ダークモードでテーブルの文字が黒くなるなどのスタイル問題は、ブラウザがクワークスモードに陥ることで発生する場合があり、ページ先頭にdoctypeを含めることで回避できます。開発時は、npm run makeでCSSを更新します。