npm package: @sukka/markdown.css
Description: The simple CSS to replicate the GitHub Markdown style (Sukka Ver.)
Author: SukkaW
Latest version: 0.1.5

# @sukka/markdown.css

> The simple CSS to replicate the GitHub Markdown style (Sukka Ver.)

[![NPM](https://img.shields.io/npm/v/@sukka/markdown.css.svg?style=flat-square)](https://www.npmjs.com/package/@sukka/markdown.css)
[![Author](https://img.shields.io/badge/Author-Sukka-b68469.svg?style=flat-square)](https://skk.moe)
[![Travis](https://img.shields.io/travis/SukkaW/markdown.css.svg?style=flat-square)](https://travis-ci.org/SukkaW/markdown.css)
[![devDependency Status](https://img.shields.io/david/dev/SukkaW/markdown.css.svg?style=flat-square)](https://david-dm.org/SukkaW/markdown.css?type=dev)
[![LICENSE](https://img.shields.io/github/license/sukkaw/markdown.css.svg?style=flat-square)](./LICENSE)
[![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/@sukka/markdown.css/badge)](https://www.jsdelivr.com/package/npm/@sukka/markdown.css)


## Why

You might ask why I want to create the project, There are already many similar projects, for example [github-markdown-css](https://github.com/sindresorhus/github-markdown-css). Well, let's look at some comparisons:

| compression | github-markdown-css | @sukka/markdown.css |
|:---:|:---:|:---:|
| none | ![](https://img.badgesize.io/sindresorhus/github-markdown-css/gh-pages/github-markdown.css?style=flat-square&label=original%20size) | ![](https://img.badgesize.io/SukkaW/markdown.css/master/dist/markdown.min.css?style=flat-square&label=original%20size) |
| gzip | ![](https://img.badgesize.io/sindresorhus/github-markdown-css/gh-pages/github-markdown.css?compression=gzip&style=flat-square) | ![](https://img.badgesize.io/SukkaW/markdown.css/master/dist/markdown.min.css?compression=gzip&style=flat-square) |
| brotli | ![](https://img.badgesize.io/sindresorhus/github-markdown-css/gh-pages/github-markdown.css?compression=brotli&style=flat-square) | ![](https://img.badgesize.io/SukkaW/markdown.css/master/dist/markdown.min.css?compression=brotli&style=flat-square) | ![](https://img.badgesize.io/SukkaW/markdown.css/master/dist/markdown.min.css?compression=brotli&style=flat-square) |

## Demo

Work in Progress.

## Install

### NPM or Yarn

```bash
# NPM
$ npm i @sukka/markdown.css --save
# Yarn
$ yarn add @sukka/markdown.css
```

### CDN

Alternatively, you can use the unpkg or jsdelivr CDN to load compiled `markdown.css`.

```html
<!-- jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sukka/markdown.css">
```

## Usage

Import the `markdown.css` file and add a `markdown-body` class to the container of your rendered Markdown.

```html
<article class="markdown-body">
    <h1>Sukka</h1>
    <p>Fairytale is only beautiful but never continued</p>
</article>
```

## Author

**@sukka/markdown.css** © [Sukka](https://github.com/SukkaW), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by Sukka with help from contributors ([list](https://github.com/SukkaW/markdown.css/contributors)).

> [Personal Website](https://skk.moe) · [Blog](https://blog.skk.moe) · GitHub [@SukkaW](https://github.com/SukkaW) · Telegram Channel [@SukkaChannel](https://t.me/SukkaChannel) · Twitter [@isukkaw](https://twitter.com/isukkaw) · Keybase [@sukka](https://keybase.io/sukka)