github-markdown-css

复制GitHub Markdown样式所需的最少CSS

该CSS是生成的。贡献应该提交到这个仓库。

<img src="https://yellow-cdn.veclightyear.com/835a84d5/b61f20d4-7fb8-4619-84b8-f696e73e833a.png" width="300">

演示

安装

手动下载，从CDNJS获取，或者使用npm：

npm install github-markdown-css

使用方法

导入github-markdown.css文件，并为渲染的Markdown容器添加markdown-body类，并设置宽度。GitHub使用980px宽度和45px内边距，移动端使用15px内边距。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="github-markdown.css">
<style>
	.markdown-body {
		box-sizing: border-box;
		min-width: 200px;
		max-width: 980px;
		margin: 0 auto;
		padding: 45px;
	}

	@media (max-width: 767px) {
		.markdown-body {
			padding: 15px;
		}
	}
</style>
<article class="markdown-body">
	<h1>独角兽</h1>
	<p>所有的事物</p>
</article>

你可以使用GitHub的/markdown API将Markdown转换为GitHub生成的HTML，这与本仓库中的CSS配合良好。其他Markdown解析器也大多能与这些样式兼容。要模仿GitHub的代码高亮效果，你可以在选择的Markdown解析器中使用starry-night。

本包提供了3种主题：

• github-markdown.css：（默认）通过@media (prefers-color-scheme)自动在明暗主题间切换。
• github-markdown-light.css：仅亮色主题。
• github-markdown-dark.css：仅暗色主题。

你可能知道，现在GitHub支持超过2种主题，包括dark_dimmed、dark_high_contrast和colorblind变体。如果你想尝试这些主题，可以自行生成！请参阅下一节。

原理

查看generate-github-markdown-css了解其生成方式和自行生成的能力。

开发

运行npm run make更新CSS。