The minimal amount of CSS to replicate the GitHub Markdown style
| Files | Last commit | Last update |
|---|---|---|
| 2 years ago | ||
| 8 years ago | ||
| 7 years ago | ||
| 8 years ago | ||
| 8 years ago | ||
| 6 months ago | ||
| 6 months ago | ||
| 6 months ago | ||
| 6 months ago | ||
| 6 months ago | ||
| 6 months ago | ||
| 6 months ago | ||
| 11 months ago | ||
| 6 years ago | ||
| 6 months ago | ||
| 6 months ago |
Translated by AI, submit an issue feedback
github-markdown-css
用于复刻 GitHub Markdown 样式的最精简 CSS
此 CSS 为生成文件。贡献请前往 此仓库。
演示
安装
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;
}
}
@media (prefers-color-scheme: dark) {
body {
background-color: #0d1117;
}
}
</style>
<article class="markdown-body">
<h1>Unicorns</h1>
<p>All the things</p>
</article>
你可以使用 GitHub 的 /markdown API 将 Markdown 转换为 GitHub 生成的 HTML，这与本仓库中的 CSS 配合良好。其他 Markdown 解析器大多也能与这些样式兼容。若要模拟 GitHub 的代码高亮效果，你可以将 starry-night 与你选择的 Markdown 解析器结合使用。
本包提供了 7 种主题：
- github-markdown.css：（默认）通过
@media (prefers-color-scheme)自动在亮色和暗色模式之间切换。 - github-markdown-light.css：仅亮色模式。
- github-markdown-dark.css：仅暗色模式。
- github-markdown-dark-dimmed.css：暗色（柔和）模式。
- github-markdown-dark-high-contrast.css：暗色（高对比度）模式。
- github-markdown-dark-colorblind.css：暗色（适用于红色盲和绿色盲）模式。
- github-markdown-light-colorblind.css：亮色（适用于红色盲和绿色盲）模式。
原理
有关生成方式以及自定义生成的方法，请参见 generate-github-markdown-css。
故障排除
如果遇到样式问题，例如暗模式下表格字体显示为黑色，可能是浏览器意外进入了 quirks mode（怪异模式）。
为避免怪异模式，请始终在页面顶部包含文档类型声明。
<!doctype html>
<html lang="en"><head></head><body></body></html>
开发
运行 npm run make 以更新 CSS。