marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-04 16:16:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Multiple pages through async before page load

Browse Source
This commit is contained in:
Yash-Singh1
2021-11-01 18:00:39 -07:00
parent fdfb5d8270
commit c015d97957
1 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/index.html
View File

@@ -38,16 +38,20 @@
<body> <body>
<div id="app"></div> <div id="app"></div>
<script> <script>
const initEditor = exports.default; var initEditor = exports.default;
var parser = new DOMParser();
var currentCodeExample = 0; var currentCodeExample = 0;
var colorize = []; var colorize = [];
function colorizeEverything() { function colorizeEverything(html) {
colorize.map((id) => { initEditor(monaco)
monaco.editor.colorizeElement(document.getElementById('code' + id), { theme: 'mermaid' }) return new Promise((resolve, reject) => {
var parsed = parser.parseFromString(html, 'text/html').body
Promise.all([...parsed.querySelectorAll('pre[id*="code"]')].map(codeBlock => monaco.editor.colorize(codeBlock.innerText, 'mermaid', { theme: 'mermaid' }))).then(result => {
parsed.querySelectorAll('pre[id*="code"]').forEach((codeBlock, index) => codeBlock.innerHTML = result[index])
resolve(parsed.innerHTML)
})
}) })
colorize = colorize.filter(colorizeEl => colorizeEl)
} }
window.$docsify = { window.$docsify = {
@@ -69,7 +73,7 @@
currentCodeExample++; currentCodeExample++;
colorize.push(currentCodeExample); colorize.push(currentCodeExample);
return ( return (
'<pre id="code' + currentCodeExample + '" data-lang="mermaid">' + code + '</pre>' '<pre id="code' + currentCodeExample + '">' + code + '</pre>'
) )
} }
return this.origin.code.apply(this, arguments); return this.origin.code.apply(this, arguments);
@@ -84,11 +88,12 @@
return editHtml + html return editHtml + html
}) })
hook.ready(function () { hook.afterEach(function (html, next) {
if (document.readyState !== 'complete') { (async() => {
return; while (!window.hasOwnProperty("monaco"))
} await new Promise(resolve => setTimeout(resolve, 1000));
colorizeEverything() colorizeEverything(html).then(newHTML => next(newHTML))
})();
}) })
} }
] ]
@@ -109,10 +114,6 @@
ga('send', 'pageview', location.hash); ga('send', 'pageview', location.hash);
} }
} }
window.onload = () => {
initEditor(monaco)
colorizeEverything()
}
</script> </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>