Github-markdown-css介绍

半兽人 发表于: 2018-12-08   最后更新时间: 2018-12-08  

复制GitHub Markdown样式的最小CSS量。

演示

安装

手动下载, 从CDNJS, 或使用npm:

$ npm install github-markdown-css

使用

导入github-markdown.css文件并将markdown-body类添加到渲染的Markdown的容器中,并为其设置宽度。 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>Unicorns</h1>
    <p>All the things</p>
</article>

How

请参阅 generate-github-markdown-css 了解它是如何生成的,以及如何生成自己的css。

Dev

运行 npm run make 更新CSS.


github:https://github.com/sindresorhus/github-markdown-css



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容




上一条: Prism.js介绍
下一条: Markdown可预览编辑器 —— Codemirror+Marked+Prism