oda-framework
Version:
66 lines (65 loc) • 2.28 kB
JavaScript
import * as markdown from './lib/markdown-wasm/markdown.es.js';
import './lib/mathjax-config.js';
import './lib/mathjax/tex-mml-chtml.js';
import './lib/highlight.min.js';
await markdown.ready;
await MathJax.startup.promise;
const PATH = import.meta.url.replace('markdown-viewer.js','');
ODA({ is: 'oda-markdown-viewer', template: /*html*/`
<link rel="stylesheet" :href="presetcss">
<div class="md-wasm"></div>
`,
value: String,
presetcss: `${PATH}lib/preset.css`,
url: {
$type: String,
async set(n) {
try {
const response = await fetch(n);
if (response.ok)
this.value = await response.text();
} catch (e) {
console.error(e);
}
}
},
domIsReady: false,
$observers: {
srcChanged(value, domIsReady) {
if (!value) this.$('div').innerHTML = '';
else if (value && domIsReady) {
this.$('div').innerHTML = markdown.parse(value, {
onCodeBlock(lang, str) {
str = String.fromCharCode.apply(null, str);
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (err) { }
}
try {
return hljs.highlightAuto(str).value;
} catch (err) { }
return '';
}
})
MathJax.texReset();
MathJax.typesetClear();
MathJax.typesetPromise([this.$('div')]).then(() => {
this.fire('loaded');
}).catch(function (err) {
console.error(err);
})
}
}
},
attached() {
this.domIsReady = true;
},
async exportValue() {
let css = await fetch(this.presetcss);
css = await css.text();
const wasm = this.$('.md-wasm');
const html = wasm?.outerHTML;
return { css, html, type: 'md' };
}
})