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-styleOr 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.