# duckling-markdown-css

> The minimal amount of CSS to replicate the GitHub Markdown style

Latest version **4.0.4** (published 2021-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install duckling-markdown-css
pnpm add duckling-markdown-css
yarn add duckling-markdown-css
bun add duckling-markdown-css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.4 |
| Published | 2021-12-01 |
| First published | 2019-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Sindre Sorhus |
| Maintainers | mrdrivingduck |
| Keywords | browser, github, markdown, md, css, style, stylesheet |

## Links

- npm: https://www.npmjs.com/package/duckling-markdown-css
- Repository: https://github.com/mrdrivingduck/github-markdown-css
- Homepage: https://github.com/mrdrivingduck/github-markdown-css#readme
- Issues: https://github.com/mrdrivingduck/github-markdown-css/issues
- Funding: https://github.com/sponsors/sindresorhus
- npm.io page: https://npm.io/package/duckling-markdown-css

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 4.0.4 (latest) — 2021-12-01
- 4.0.3 — 2021-09-17
- 4.0.2 — 2021-09-12
- 4.0.1 — 2020-12-19
- 0.0.3 — 2019-07-12
- 0.0.2 — 2019-07-12
- 0.0.1 — 2019-07-12

## README

# github-markdown-css-dark

> The minimal amount of CSS to replicate the GitHub Markdown style

**The CSS is generated. Contributions should go to [this repo](https://github.com/sindresorhus/generate-github-markdown-css).**

[<img src="https://cloud.githubusercontent.com/assets/170270/5219062/f22a978c-7685-11e4-8316-af25b6c89bc0.png" width="300">](http://sindresorhus.com/github-markdown-css)

[<img src="https://github.com/mrdrivingduck/github-markdown-css/blob/main/github-markdown-dark.png" width="300" />](https://github.com/mrdrivingduck/github-markdown-css/blob/main/github-markdown-dark.png)

## [Demo](https://mrdrivingduck.github.io/github-markdown-css)

## Install

With npm:

```bash
npm install duckling-markdown-css
```

## Usage

Import the `github-markdown-dark.css` file and add a `markdown-body-dark` class to the container of your rendered Markdown and set a width for it. GitHub uses `980px` width and `45px` padding, and `15px` padding for mobile.

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

	@media (max-width: 767px) {
		.markdown-body-dark {
			padding: 15px;
		}
	}
</style>
<article class="markdown-body-dark">
	<h1>Unicorns</h1>
	<p>All the things</p>
</article>
```

If you want code syntax highlighted, use GitHub Flavored Markdown rendered from [GitHub's `/markdown` API](https://docs.github.com/en/free-pro-team@latest/rest/reference/markdown).

## How

See [`generate-github-markdown-css`](https://github.com/sindresorhus/generate-github-markdown-css) for how it's generated and ability to generate your own.

## Dev

Run `npm run make` to update the CSS.

---
_Source: https://npm.io/package/duckling-markdown-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._