/**
* Markdown Style
* @version 1.1.0
* @author 小弟调调
* https://github.com/jaywcjlove/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.
*/
const octiconLinkStyle = `
markdown-style h1:hover a.anchor .icon-link:before,
markdown-style h2:hover a.anchor .icon-link:before,
markdown-style h3:hover a.anchor .icon-link:before,
markdown-style h4:hover a.anchor .icon-link:before,
markdown-style h5:hover a.anchor .icon-link:before,
markdown-style h6:hover a.anchor .icon-link:before {
width: 16px;
height: 16px;
content: ' ';
display: inline-block;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,");
mask-image: url("data:image/svg+xml,");
}`;
const __TEMPLATE__ = document.createElement('template');
__TEMPLATE__.innerHTML = `
`;
class MarkdownStyle extends HTMLElement {
get theme() {
const value = this.getAttribute('theme');
return value === null ? '' : value;
}
set theme(name) {
this.setAttribute('theme', name);
}
constructor() {
super();
this.shadow = this.attachShadow({ mode: 'open' });
this.shadow.appendChild(__TEMPLATE__.content.cloneNode(true));
const style = Array.prototype.slice.call(this.shadow.children).find((item) => item.tagName === 'STYLE');
if (style) {
const id = '__MARKDOWN_STYLE__';
const findStyle = document.getElementById(id);
if (!findStyle) {
style.id = id;
document.head.append(style);
}
}
}
connectedCallback() {
const disableThemeAutoSwitch = this.getAttribute('theme-auto-switch-disabled');
if (disableThemeAutoSwitch == '' || (disableThemeAutoSwitch && disableThemeAutoSwitch.toLowerCase() === 'true')) {
return;
}
if (!this.theme) {
const { colorMode } = document.documentElement.dataset;
this.theme = colorMode;
const observer = new MutationObserver((mutationsList, observer) => {
this.theme = document.documentElement.dataset.colorMode;
});
observer.observe(document.documentElement, { attributes: true });
window.matchMedia('(prefers-color-scheme: light)').onchange = (event) => {
this.theme = event.matches ? 'light' : 'dark';
};
window.matchMedia('(prefers-color-scheme: dark)').onchange = (event) => {
this.theme = event.matches ? 'dark' : 'light';
};
}
}
}
customElements.define('markdown-style', MarkdownStyle);