star-markdown-css's Introduction

star-markdown-css

Markdown Css about starry.

Demo

Theme

Planet(default): violet wandering planet
Blood
Pure

Install By

Download

Download manually

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

github-markdown-css

yunyoujun / star-markdown-css Goto Github PK

star-markdown-css's Introduction

star-markdown-css

Theme

Install By

Download

CDN

Yarn Or NPM

Usage

Html

Example In HTML

Vue

Example In Vue

Dev

Start

Build

Intend

Thanks

star-markdown-css's People

Contributors

Stargazers

Watchers

Forkers

star-markdown-css's Issues

Recommend Projects

Recommend Topics

Recommend Org