You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

42 lines
1.3 KiB

1 year ago
import { ref, onMounted } from 'vue';
import { marked, setOptions } from '../../lib/marked/marked.esm.js';
import mermaid from '../../lib/mermaid/mermaid.esm.min.mjs';
import hljs from '../../lib/highlightjs/highlight.min.js';
export default {
template: `<div ref="tplRef"><div class="source" style="display:none;"><slot /></div><div class="markdown-body"></div></template>`,
props: {
name: {
default: null
}
},
setup(props) {
const tplRef = ref(null);
mermaid.initialize({ startOnLoad: false });
let id = 0;
onMounted(async () => {
setOptions({
highlight: function (code, lang) {
if (lang === 'mermaid') {
return mermaid.mermaidAPI.render(`mermaid${id++}`, code, undefined);
} else {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
},
langPrefix: 'hljs language-',
});
let mdText = tplRef.value.querySelector('.source').innerText;
if (props.name !== null) {
const response = await fetch(`./assets/docs/${props.name}.md`);
mdText = await response.text();
}
tplRef.value.querySelector('.markdown-body').innerHTML = marked(mdText);
tplRef.value.querySelector('.source').remove();
});
return {
tplRef
};
}
}