https://github.com/yunyoujun/star-markdown-css
🌟 Markdown Css about violet wandering planet.
https://github.com/yunyoujun/star-markdown-css
markdown-css yun
Last synced: about 2 months ago
JSON representation
🌟 Markdown Css about violet wandering planet.
- Host: GitHub
- URL: https://github.com/yunyoujun/star-markdown-css
- Owner: YunYouJun
- License: mit
- Created: 2018-07-01T08:26:15.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-29T16:52:22.000Z (5 months ago)
- Last Synced: 2025-04-08T05:01:36.282Z (2 months ago)
- Topics: markdown-css, yun
- Language: SCSS
- Homepage: https://yunyoujun.github.io/star-markdown-css/
- Size: 1.07 MB
- Stars: 14
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# star-markdown-css
> Markdown Css about starry.
[](https://www.npmjs.com/package/star-markdown-css/)
[](https://npm-stat.com/charts.html?package=star-markdown-css)
[](https://cdn.jsdelivr.net/npm/star-markdown-css/dist/yun/markdown.min.css)
- [Demo](https://yunyoujun.github.io/star-markdown-css/)
## Theme
- [x] Planet(default): violet wandering planet
- [ ] Blood
- [ ] Pure
## Install By
### Download
- Download [manually](https://github.com/YunYouJun/star-markdown-css/archive/main.zip)
### CDN
- JSDELIVR:
- unpkg:
### Yarn Or NPM
```sh
yarn add star-markdown-css
# or
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.
```html
```
#### Example In HTML
In html.
```html
.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;
}
}
Unicorns
All the things
```
### Vue
Just import it where you need it.
```js
import 'star-markdown-css'
```
#### Example In Vue
In a vue component.
> You can try [vite-plugin-vue-markdown](https://github.com/mdit-vue/vite-plugin-vue-markdown).
```html
import 'star-markdown-css'
// ...
.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;
}
}
```
Or in `main.ts`:
```ts
import 'star-markdown-css'
// ...
```
## Dev
### Start
```sh
# Install Dependencies
pnpm
# start dev
pnpm dev
# You can see in http://localhost:3333
```
### Build
```sh
yarn build
```
## Intend
- [ ] Add KLK Style (Pure & Blood)
- [ ] Use Vue Demo
## Thanks
- [github-markdown-css](https://github.com/sindresorhus/github-markdown-css)
## [Sponsors](https://sponsors.yunyoujun.cn)
