Skip to content

Commit 257b8f8

Browse files
ksw2000ksw2000
committed
fix: render after the dom loaded
1 parent d316236 commit 257b8f8

File tree

1 file changed

+95
-86
lines changed

1 file changed

+95
-86
lines changed

‎example/index.html‎

Lines changed: 95 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -621,7 +621,7 @@
621621
}
622622

623623
@media (orientation: portrait) {
624-
.two-column{
624+
.two-column {
625625
flex-direction: column;
626626
}
627627
}
@@ -633,21 +633,6 @@
633633
<textarea id="input"></textarea>
634634
<div id="output"></div>
635635
</div>
636-
<script src="./js/hmd2html.min.js"></script>
637-
<script>
638-
window.converter = new window.hmd2html.Converter();
639-
fetch("https://raw.githubusercontent.com/ksw2000/hackmd-to-html-cli/refs/heads/main/example/index.md")
640-
.then(res => res.text())
641-
.then(data => {
642-
document.getElementById("input").value = data;
643-
const res = window.converter.render(data);
644-
const main = res.main;
645-
document.getElementById("output").innerHTML = main;
646-
})
647-
document.getElementById("input").addEventListener("input", (event) => {
648-
document.getElementById("output").innerHTML = window.converter.render(event.target.value).main;
649-
});
650-
</script>
651636
<!--highlight-->
652637
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
653638
<script
@@ -674,87 +659,111 @@
674659
<script>
675660
mermaid.init({ noteMargin: 10 }, document.querySelectorAll(".language-mermaid"));
676661
mermaid.initialize({ startOnLoad: true });
677-
document.querySelectorAll(".language-sequence")?.forEach((dom, i) => {
678-
dom.id = `sequence-${i}`;
679-
let content = dom.textContent;
680-
dom.textContent = "";
681-
Diagram.parse(content).drawSVG(dom.id, { theme: 'simple' });
682-
});
683-
document.querySelectorAll(".language-flow")?.forEach((dom, i) => {
684-
dom.id = `flow-${i}`;
685-
let content = dom.textContent;
686-
dom.textContent = "";
687-
flowchart.parse(content).drawSVG(dom.id);
688-
});
689-
690662
var viz = new Viz();
691-
document.querySelectorAll(".language-graphviz")?.forEach((dom, i) => {
692-
dom.id = `graphviz-${i}`;
693-
let content = dom.textContent;
694-
dom.textContent = "";
695-
viz.renderSVGElement(content)
696-
.then(function (element) {
697-
dom.appendChild(element);
698-
})
699-
.catch(error => {
700-
// Create a new Viz instance (@see Caveats page for more info)
701-
viz = new Viz();
702-
703-
// Possibly display the error
704-
console.error(error);
705-
});
706-
});
707-
708-
document.querySelectorAll(".language-abc")?.forEach((dom, i) => {
709-
dom.id = `abc-${i}`;
710-
let content = dom.textContent;
711-
ABCJS.renderAbc(dom.id, content);
712-
});
713-
714-
document.querySelectorAll(".language-vega")?.forEach((dom, i) => {
715-
dom.id = `vega-${i}`;
716-
let content = dom.textContent;
717-
let spec = {};
718-
try {
719-
spec = JSON.parse(content);
720-
} catch (e) {
721-
spec = {};
722-
}
723-
dom.textContent = "";
724-
vegaEmbed(`#${dom.id}`, spec);
725-
});
726663

727664
// https://github.com/highlightjs/highlight.js/
728665
// modified from: https://github.com/wcoder/highlightjs-line-numbers.js/
729-
let lastLine = 0;
730666
const BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
731667
function getLinesCount(text) {
732668
return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
733669
}
734-
document.querySelectorAll('code')?.forEach((dom) => {
735-
let lang = dom.className.match(/language\-([^=]*)?(=?)(\+?[0-9]*)$/);
736-
if (lang === null) return;
737-
if (lang[1] === '!') {
738-
dom.classList.add("break");
739-
return;
740-
} else {
741-
hljs.highlightElement(dom);
742-
}
743670

744-
if (lang[2]) {
745-
let line;
746-
if (lang[3] === '') {
747-
line = 1;
748-
} else if (lang[3] === '+') {
749-
line = lastLine + 1;
671+
function render() {
672+
// mermaid
673+
document.querySelectorAll(".language-sequence")?.forEach((dom, i) => {
674+
dom.id = `sequence-${i}`;
675+
let content = dom.textContent;
676+
dom.textContent = "";
677+
Diagram.parse(content).drawSVG(dom.id, { theme: 'simple' });
678+
});
679+
document.querySelectorAll(".language-flow")?.forEach((dom, i) => {
680+
dom.id = `flow-${i}`;
681+
let content = dom.textContent;
682+
dom.textContent = "";
683+
flowchart.parse(content).drawSVG(dom.id);
684+
});
685+
686+
// graphviz
687+
document.querySelectorAll(".language-graphviz")?.forEach((dom, i) => {
688+
dom.id = `graphviz-${i}`;
689+
let content = dom.textContent;
690+
dom.textContent = "";
691+
viz.renderSVGElement(content)
692+
.then(function (element) {
693+
dom.appendChild(element);
694+
})
695+
.catch(error => {
696+
// Create a new Viz instance (@see Caveats page for more info)
697+
viz = new Viz();
698+
699+
// Possibly display the error
700+
console.error(error);
701+
});
702+
});
703+
704+
document.querySelectorAll(".language-abc")?.forEach((dom, i) => {
705+
dom.id = `abc-${i}`;
706+
let content = dom.textContent;
707+
ABCJS.renderAbc(dom.id, content);
708+
});
709+
710+
document.querySelectorAll(".language-vega")?.forEach((dom, i) => {
711+
dom.id = `vega-${i}`;
712+
let content = dom.textContent;
713+
let spec = {};
714+
try {
715+
spec = JSON.parse(content);
716+
} catch (e) {
717+
spec = {};
718+
}
719+
dom.textContent = "";
720+
vegaEmbed(`#${dom.id}`, spec);
721+
});
722+
723+
let lastLine = 0;
724+
document.querySelectorAll('code')?.forEach((dom) => {
725+
let lang = dom.className.match(/language\-([^=]*)?(=?)(\+?[0-9]*)$/);
726+
if (lang === null) return;
727+
if (lang[1] === '!') {
728+
dom.classList.add("break");
729+
return;
750730
} else {
751-
line = Number(lang[3]);
731+
hljs.highlightElement(dom);
752732
}
753-
lastLine = line + getLinesCount(dom.innerText);
754-
hljs.lineNumbersBlock(dom, {
755-
startFrom: line
756-
});
757-
}
733+
734+
if (lang[2]) {
735+
let line;
736+
if (lang[3] === '') {
737+
line = 1;
738+
} else if (lang[3] === '+') {
739+
line = lastLine + 1;
740+
} else {
741+
line = Number(lang[3]);
742+
}
743+
lastLine = line + getLinesCount(dom.innerText);
744+
hljs.lineNumbersBlock(dom, {
745+
startFrom: line
746+
});
747+
}
748+
});
749+
}
750+
</script>
751+
<!-- <script src="./js/hmd2html.min.js"></script> -->
752+
<script src="../dist/web/hmd2html.min.js"></script>
753+
<script>
754+
window.converter = new window.hmd2html.Converter();
755+
fetch("https://raw.githubusercontent.com/ksw2000/hackmd-to-html-cli/refs/heads/main/example/index.md")
756+
.then(res => res.text())
757+
.then(data => {
758+
document.getElementById("input").value = data;
759+
const res = window.converter.render(data);
760+
const main = res.main;
761+
document.getElementById("output").innerHTML = main;
762+
render();
763+
})
764+
document.getElementById("input").addEventListener("input", (event) => {
765+
document.getElementById("output").innerHTML = window.converter.render(event.target.value).main;
766+
render();
758767
});
759768
</script>
760769
</body>

0 commit comments

Comments
 (0)