Package Exports

star-markdown-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 violet wandering planet.

Demo

Description

.min mean minified.
star-markdown.css mean css with .markdown.
star-common.css mean css replace .markdown with body.

Theme

Star(Planet:default)
Blood
Pure

Install

Download manually
unpkg

NPM

npm install star-markdown-css

Yarn

yarn add 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="star-markdown.css">

Example

In html.

<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/star-markdown-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 a vue component.

<template>
  <vue-markdown
    :source="mdText"
    class="markdown-body"/>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import axios from 'axios'
import 'star-markdown-css'
export default {
  name: 'MdViewer',
  components: {
    VueMarkdown
  },
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      mdText: ''
    }
  },
  created() {
    axios.get(this.src).then(res => {
      this.mdText = res.data
    })
  }
}
</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>

Dev

Start

# Install Dependencies
yarn
# start dev
yarn start
# or
# yarn dev
# You can see in http://localhost:2333
# Custom port in gulpfile.js about 'browser-sync'

Build

yarn build

Intend

Auto Release
Add KLK Style (Pure & Blood)
Use Vue Demo

Thanks

github-markdown-css

Change Log

2019.01.04 Update to gulp 4.0.0