智慧物流>> star-markdown-css>> 返回
项目作者： YunYouJun

项目描述 ：
Markdown Css about violet wandering planet.
高级语言： SCSS
项目地址: git://github.com/YunYouJun/star-markdown-css.git
创建时间： 2018-07-01T08:26:15Z
项目社区：https://github.com/YunYouJun/star-markdown-css
开源协议：MIT License
下载


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

  1. yarn add star-markdown-css
  2. # or
  3. 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.

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

Example In HTML

In html.

  1. <html>
  2.   <meta name="viewport" content="width=device-width, initial-scale=1" />
  3.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css/dist/planet/markdown.min.css" />
  4.   <style>
  5.     .markdown-body {
  6.       box-sizing: border-box;
  7.       min-width: 200px;
  8.       max-width: 980px;
  9.       margin: 0 auto;
  10.       padding: 45px;
  11.     }
  13.     @media (max-width: 767px) {
  14.       .markdown-body {
  15.         padding: 15px;
  16.       }
  17.     }
  18.   </style>
  19.   <body>
  20.     <article class="markdown-body">
  21.       <h1>Unicorns</h1>
  22.       <p>All the things</p>
  23.     </article>
  24.   </body>
  25. </html>

Vue

Just import it where you need it.

  1. import 'star-markdown-css'

Example In Vue

In a vue component.

You can try vite-plugin-vue-markdown.

  1. <template>
  2.   <div class="markdown-body">
  3.     <!-- You Markdown -->
  4.   </div>
  5. </template>
  7. <script>
  8.   import 'star-markdown-css'
  9.   // ...
  10. </script>
  12. <style>
  13.   .markdown-body {
  14.     box-sizing: border-box;
  15.     min-width: 200px;
  16.     max-width: 980px;
  17.     margin: 0 auto;
  18.     padding: 0px 20px;
  19.   }
  20.   @media (max-width: 767px) {
  21.     .markdown-body {
  22.       padding: 15px;
  23.     }
  24.   }
  25. </style>

Or in main.ts:

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

Dev

Start

  1. # Install Dependencies
  2. pnpm
  3. # start dev
  4. pnpm dev
  5. # You can see in http://localhost:3333

Build

  1. yarn build

Intend

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

Thanks

Sponsors