Integrate markdown styles into web components, Markdown CSS styles will not be conflicted.
MIT License
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:
<script src="https://unpkg.com/@wcj/markdown-style"></script>
Skypack CDN:
<script src="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 components here.
Using it in your React:
import React from 'react';
import '@wcj/markdown-style';
function Demo() {
return (
<markdown-style>
<h1>Markdown Style</h1>
</markdown-style>
);
}
Convert markdown to html and add markdown style to it:
<script src="https://unpkg.com/@wcj/markdown-to-html/dist/markdown.min.js"></script>
<script src="https://unpkg.com/@wcj/markdown-style"></script>
<markdown-style>
\```jsx
import React from 'react';
import 'markdown-style';
function Demo() {
return (
<markdown-style>
<h1>Markdown Style</h1>
</markdown-style>
);
}
\```
</markdown-style>
<script>
const mdstr = document.querySelector('markdown-style');
mdstr.innerHTML = markdown.default(mdstr.textContent);
</script>
By default, the 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>
.
<html data-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-style theme="dark">
<h1>Markdown Style</h1>
</markdown-style>
Disable internal theme switching functionality
<markdown-style theme-auto-switch-disabled theme="dark">
<h1>Markdown Style</h1>
</markdown-style>
As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.