Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork1
Integrate markdown styles into web components, Markdown CSS styles will not be conflicted.
License
jaywcjlove/markdown-style
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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.
npm install --save @wcj/markdown-style
Or load the ES module directly through unpkg
unpkg.com CDN:
<scriptsrc="https://unpkg.com/@wcj/markdown-style"></script>
Skypack CDN:
<scriptsrc="https://cdn.skypack.dev/@wcj/markdown-style"></script>
Use it in your HTML:
<markdown-style><!-- markdown html is here --><h1>Markdown HTML</h1></markdown-style>
Learn about web componentshere.
Using it in your React:
importReactfrom'react';import'@wcj/markdown-style';functionDemo(){return(<markdown-style><h1>Markdown Style</h1></markdown-style>);}
Convert markdown to html and add markdown style to it:
<scriptsrc="https://unpkg.com/@wcj/markdown-to-html/dist/markdown.min.js"></script><scriptsrc="https://unpkg.com/@wcj/markdown-style"></script><markdown-style>\```jsximport React from 'react';import 'markdown-style';function Demo() { return (<markdown-style><h1>Markdown Style</h1></markdown-style> );}\```</markdown-style><script>constmdstr=document.querySelector('markdown-style');mdstr.innerHTML=markdown.default(mdstr.textContent);</script>
By default, thedark-mode is automatically switched according to the system. If you need to switch manually, just set thedata-color-mode="dark" parameter for<html>.
<htmldata-color-mode="dark">
document.documentElement.setAttribute('data-color-mode','dark')document.documentElement.setAttribute('data-color-mode','light')
Set the theme, do not automatically switch with the system:
<markdown-styletheme="dark"><h1>Markdown Style</h1></markdown-style>
Disable internal theme switching functionality
<markdown-styletheme-auto-switch-disabledtheme="dark"><h1>Markdown Style</h1></markdown-style>
As always, thanks to our amazing contributors!
Made withgithub-action-contributors.
Licensed under theMIT License.
About
Integrate markdown styles into web components, Markdown CSS styles will not be conflicted.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.