Markdown Css about starry.
- Planet(default): violet wandering planet
- Blood
- Pure
- Download manually
- 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 add star-markdown-css
# or
npm install star-markdown-cssImport 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.
Just use css with link tag.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css/dist/planet/planet-markdown.min.css" />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>Just import it where you need it.
import 'star-markdown-css'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'
// ...# Install Dependencies
pnpm
# start dev
pnpm dev
# You can see in http://localhost:3333yarn build- Add KLK Style (Pure & Blood)
- Use Vue Demo
