star-markdown-css

0.5.3 • Public • Published

star-markdown-css

Markdown Css about starry.

Demo npm npm npm bundle size (minified + gzip) npm bundle size (minified) jsDelivr hits (npm)

Theme

Planet Blood

  • [x] Planet(default): violet wandering planet
  • [ ] Blood
  • [ ] Pure

Install By

Download

CDN

Yarn Or NPM

yarn add star-markdown-css
# or
npm install star-markdown-css

Usage

Import the star-markdown.css file and add a markdown-body 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

Just use css with link tag.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css/dist/planet/planet-markdown.min.css" />

Example In HTML

In html.

<html>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css/dist/planet/planet-markdown.min.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>
  <body>
    <article class="markdown-body">
      <h1>Unicorns</h1>
      <p>All the things</p>
    </article>
  </body>
</html>

Vue

Just import it where you need it.

import 'star-markdown-css'

Example In Vue

In a vue component.

You can try vite-plugin-vue-markdown.

<template>
  <div class="markdown-body">
    <!-- You Markdown -->
  </div>
</template>

<script>
  import 'star-markdown-css'
  // ...
</script>

<style>
  .markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    padding: 0px 20px;
  }
  @media (max-width: 767px) {
    .markdown-body {
      padding: 15px;
    }
  }
</style>

Or in main.ts:

import 'star-markdown-css'
// ...

Dev

Start

# Install Dependencies
pnpm
# start dev
pnpm dev
# You can see in http://localhost:3333

Build

yarn build

Intend

  • [ ] Add KLK Style (Pure & Blood)
  • [ ] Use Vue Demo

Thanks

Package Sidebar

Install

npm i star-markdown-css

Weekly Downloads

279

Version

0.5.3

License

MIT

Unpacked Size

83.7 kB

Total Files

33

Last publish

Collaborators

  • yunyoujun