star-markdown-css
Markdown Css about starry.
Theme
- [x] Planet(default): violet wandering planet
- [ ] Blood
- [ ] Pure
Install By
Download
- Download manually
CDN
- JSDELIVR: https://cdn.jsdelivr.net/npm/star-markdown-css/dist/planet/planet-markdown.min.css
- unpkg: https://unpkg.com/star-markdown-css/dist/planet/planet-markdown.min.css
Yarn Or NPM
yarn add star-markdown-css
# or
npm install star-markdown-cssUsage
Import the
star-markdown.cssfile and add amarkdown-bodyclass to the container of your rendered Markdown and set a width for it.
GitHub uses980pxwidth and45pxpadding, and15pxpadding 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:3333Build
yarn buildIntend
- [ ] Add KLK Style (Pure & Blood)
- [ ] Use Vue Demo
Thanks
Sponsors
