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-css
Import the
star-markdown.css
file and add amarkdown-body
class to the container of your rendered Markdown and set a width for it.
GitHub uses980px
width and45px
padding, and15px
padding 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.
<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>
# Install Dependencies
pnpm
# start dev
pnpm dev
# You can see in http://localhost:3333
yarn build
- Add KLK Style (Pure & Blood)
- Use Vue Demo