Skip to content

Latest commit

 

History

History
126 lines (93 loc) · 3.3 KB

README.md

File metadata and controls

126 lines (93 loc) · 3.3 KB
Raw

Markdown Style

Buy me a coffee CI jsDelivr CDN npm version Open in unpkg

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

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.