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

added highlighting functionality just need to setup the particular themes

Browse source
This commit is contained in:
Pagwin 2024-10-24 17:25:10 -04:00
parent c52e29e10d
commit 06472d13c6
No known key found for this signature in database
GPG key ID: 81137023740CA260
4 changed files with 48 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
TODO
View file

@ -2,7 +2,11 @@ get RSS feed up and running
handle dark/light theming correctly (https://www.joshwcomeau.com/react/dark-mode/) seems useful for that
get code blocks working properly, namely get them colored (probably with https://highlightjs.org/), maybe add a red border, consider https://github.com/highlightjs/highlight.js?tab=readme-ov-file#using-web-workers
~~get code blocks working properly, namely get them colored (probably with https://highlightjs.org/), maybe add a red border, consider https://github.com/highlightjs/highlight.js?tab=readme-ov-file#using-web-workers~~
get highlight js theme set to my preference, make sure to add nesting in CSS so it'll be active when the light/dark class is active
https://highlightjs.org/examples
https://github.com/highlightjs/base16-highlightjs/blob/main/themes/google-light.css
ico?

37
static/js/code_highlighting.mjs Normal file
View file

@ -0,0 +1,37 @@
// 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();

5
static/js/code_highlighting_worker.mjs Normal file
View file

@ -0,0 +1,5 @@
onmessage = (event) => {
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);
};

1
templates/default.html
View file

@ -7,6 +7,7 @@
<title>{{{title}}} · Pagwin's website</title>
<link rel="stylesheet" type="text/css" href="/static/css/default.css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="https://pagwin.xyz/index.xml">
<script type="module" src="/static/js/code_highlighting.mjs"></script>
</head>
<body class="dark">