# markdown-style
**Repository Path**: mirrors_jaywcjlove/markdown-style
## Basic Information
- **Project Name**: markdown-style
- **Description**: Integrate markdown styles into web components, Markdown CSS styles will not be conflicted.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-06
- **Last Updated**: 2025-09-21
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Markdown Style
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://github.com/jaywcjlove/markdown-style/actions/workflows/ci.yml)
[](https://www.jsdelivr.com/package/npm/@wcj/markdown-style)
[](https://www.npmjs.com/package/@wcj/markdown-style)
[](https://uiwjs.github.io/npm-unpkg/#/pkg/@wcj/markdown-style/file/README.md)
Integrate markdown styles into web components, Markdown CSS styles will not be conflicted. The minimal amount of CSS to replicate the GitHub Markdown style. Support dark-mode/night mode.
## Installation
```bash
npm install --save @wcj/markdown-style
```
Or load the ES module directly through unpkg
unpkg.com CDN:
```html
```
Skypack CDN:
```html
```
## Usage
Use it in your HTML:
```html
Markdown HTML
```
Learn about web components [here](https://developer.mozilla.org/en-US/docs/Web/Web_Components).
Using it in your React:
```jsx
import React from 'react';
import '@wcj/markdown-style';
function Demo() {
return (
Markdown Style
);
}
```
Convert markdown to html and add markdown style to it:
```html
\```jsx
import React from 'react';
import 'markdown-style';
function Demo() {
return (
Markdown Style
);
}
\```
```
## Support dark-mode/night-mode
By default, the [dark-mode](https://github.com/jaywcjlove/dark-mode/) is automatically switched according to the system. If you need to switch manually, just set the `data-color-mode="dark"` parameter for ``.
```html
```
```js
document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')
```
Set the theme, do not automatically switch with the system:
```html
Markdown Style
```
Disable internal theme switching functionality
```html
Markdown Style
```
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the [MIT License](https://opensource.org/licenses/MIT).