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