Pagwin/new_blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fixed issue with all code blocks being set to the same thing

Browse source
This commit is contained in:
Pagwin 2024-10-24 17:58:38 -04:00
parent 06472d13c6
commit 294925c926
No known key found for this signature in database
GPG key ID: 81137023740CA260
2 changed files with 20 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/js/code_highlighting.mjs
View file

@ -3,34 +3,36 @@ async function setup(){
// start fetching css sooner rather than latter // 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()); 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 // TODO: pick light and dark themes and specify their fetch location
const lightCssProm = fetch("").then(res=>res.text()); //const lightCssProm = fetch("").then(res=>res.text());
const darkCssProm = fetch("").then(res=>res.text()); //const darkCssProm = fetch("").then(res=>res.text());
const code = document.querySelectorAll("pre.sourceCode code"); const code = document.querySelectorAll("pre.sourceCode code");
const worker = new Worker('/static/js/code_highlighting_worker.mjs'); const worker = new Worker('/static/js/code_highlighting_worker.mjs');
worker.onmessage = (event) => { worker.onmessage = (event) => {
for(let c of code){ const [index, newTxt] = event.data;
c.innerHTML = event.data; code[index].innerHTML = newTxt;
} //for(let c of code){
// c.innerHTML = event.data;
//}
} }
for(let c of code){ for(let i = 0;i<code.length;i++){
worker.postMessage(c.textContent); worker.postMessage([i, code[i].textContent]);
} }
// setting up the css for highlighting with previously fetched css // setting up the css for highlighting with previously fetched css
const baseStylesheet = new CSSStyleSheet(); const baseStylesheet = new CSSStyleSheet();
const lightThemeSheet = new CSSStyleSheet(); //const lightThemeSheet = new CSSStyleSheet();
const darkThemeSheet = new CSSStyleSheet(); //const darkThemeSheet = new CSSStyleSheet();
//shenanigans done to avoid awaiting each promise sequentially //shenanigans done to avoid awaiting each promise sequentially
await Promise.all([ await Promise.all([
(async()=>{return await baseStylesheet.replace(await baseCssProm)})(), (async()=>{return await baseStylesheet.replace(await baseCssProm)})(),
(async()=>{return await lightThemeSheet.replace(await lightCssProm)})(), //(async()=>{return await lightThemeSheet.replace(await lightCssProm)})(),
(async()=>{return await darkThemeSheet.replace(await darkCssProm)})(), //(async()=>{return await darkThemeSheet.replace(await darkCssProm)})(),
]); ]);
document.adoptedStyleSheets.push(baseStylesheet); document.adoptedStyleSheets.push(baseStylesheet);
document.adoptedStyleSheets.push(lightThemeSheet); //document.adoptedStyleSheets.push(lightThemeSheet);
document.adoptedStyleSheets.push(darkThemeSheet); //document.adoptedStyleSheets.push(darkThemeSheet);
} }
addEventListener('load', setup); addEventListener('load', setup);

8
static/js/code_highlighting_worker.mjs
View file

@ -1,5 +1,7 @@
onmessage = (event) => { onmessage = (event) => {
importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js'); importScripts('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js');
const result = self.hljs.highlightAuto(event.data);
postMessage(result.value); const [index, txt] = event.data;
const result = self.hljs.highlightAuto(txt);
postMessage([index, result.value]);
}; };