JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 157
  • Score
    100M100P100Q88864F
  • License MIT

Markdown Css about starry.

Package Exports

  • star-markdown-css
  • star-markdown-css/dist/planet/planet-markdown.min.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (star-markdown-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

  • 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

Sponsors