new_blog/static/js/code_highlighting.mjs

37 lines
1.6 KiB
JavaScript

// setup web worker to avoid causing issues for the rendering thread
async function setup(){
// start fetching css sooner rather than latter
const baseCssProm = fetch("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css").then(res=>res.text());
// TODO: pick light and dark themes and specify their fetch location
const lightCssProm = fetch("").then(res=>res.text());
const darkCssProm = fetch("").then(res=>res.text());
const code = document.querySelectorAll("pre.sourceCode code");
const worker = new Worker('/static/js/code_highlighting_worker.mjs');
worker.onmessage = (event) => {
for(let c of code){
c.innerHTML = event.data;
}
}
for(let c of code){
worker.postMessage(c.textContent);
}
// setting up the css for highlighting with previously fetched css
const baseStylesheet = new CSSStyleSheet();
const lightThemeSheet = new CSSStyleSheet();
const darkThemeSheet = new CSSStyleSheet();
//shenanigans done to avoid awaiting each promise sequentially
await Promise.all([
(async()=>{return await baseStylesheet.replace(await baseCssProm)})(),
(async()=>{return await lightThemeSheet.replace(await lightCssProm)})(),
(async()=>{return await darkThemeSheet.replace(await darkCssProm)})(),
]);
document.adoptedStyleSheets.push(baseStylesheet);
document.adoptedStyleSheets.push(lightThemeSheet);
document.adoptedStyleSheets.push(darkThemeSheet);
}
addEventListener('load', setup);
if(document.readyState == "complete") await setup();