@wcj/markdown-style
v1.1.2
Published
Integrate markdown styles into web components, Markdown CSS styles will not be conflicted.
Downloads
8,470
Maintainers
wcjiangReadme
Markdown Style
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
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>Usage
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>Support dark-mode/night-mode
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>Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.