From: Lady <redacted> Date: Thu, 4 May 2023 03:43:36 +0000 (-0700) Subject: [2023-05-03] blog_highlight X-Git-Url: https://git.ladys.computer/Blog/commitdiff_plain/5e1ec9fb857c5d54bf367a3317952ce6ce932ce4 [2023-05-03] blog_highlight --- diff --git a/2023-05-03/blog_highlight/#entry.rdf b/2023-05-03/blog_highlight/#entry.rdf new file mode 100644 index 0000000..24c8d29 --- /dev/null +++ b/2023-05-03/blog_highlight/#entry.rdf @@ -0,0 +1,107 @@ +<awol:Entry + xml:lang="en" + xmlns:awol="http://bblfish.net/work/atom-owl/2006-06-06/" + xmlns:dc11="http://purl.org/dc/elements/1.1/" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:sioc="http://rdfs.org/sioc/ns#" +> + <dc11:title>Adding Syntax Highlighting to Lady’s Weblog</dc11:title> + <dc11:date>2023-05-03T20:43:36-07:00</dc11:date> + <dc11:abstract rdf:parseType="Markdown"><![CDATA[ +Recent changes in Bjørn mean I can type source code prettily now! +]]></dc11:abstract> + <sioc:content rdf:parseType="Markdown"><![CDATA[ +As I [mentioned +previously](https://blog.ladys.computer/2023-04-30/hello_world/), this +blog is generated using a hacky Ecmascript+Deno static site generator I +wrote called [Bjørn](https://git.ladys.computer/Beorn). I originally +wrote Bjørn for a different blog, on a different site, and I published +the source code with the intention that anyone who used it would use it +as a template and hack on it as they saw fit. But, when I started this +blog, I decided to _not_ do that (it sounded like a lot of work <abbr +title="to be honest">t·b·h</abbr>) +and instead just pulled in the latest version from the git repository +with no changes :— + +<figure> + +```make +build: + deno run --allow-read=. --allow-write=. $(BEORN) +``` + +<figcaption>The <a +href="https://git.ladys.computer/Blog/blob/83bc234:/GNUmakefile" +>original Makefile</a> rule for building this blog.</figcaption> +</figure> + +…Look, mostly I just did not want to have to maintain a fork of my own +software just to have a blog. However, that has made it difficult +to provide any meaningful customization to the compiled output, +including things like the syntax highlighting seen on this page. + +Bjørn was written and designed to be run as a shell script—not as a +library. It processes the current directory immediately when it runs. +So in order to add configurability, I had to define “hooks” on the +global object, which Bjørn can check for at runtime and execute if they +exist. (I made those changes in +[7bea148](https://git.ladys.computer/Beorn/commitdiff/7bea148).) Then, +in what is sure to give any respectable Javascript dev nightmares, I +set up the build script for this blog as follows :— + +<figure> + +```js +#!/usr/bin/env -S deno run --allow-read --allow-write + +// Copyright © 2023 Lady [@ Lady’s Computer]. +// +// This Source Code Form is subject to the terms of the Mozilla Public +// License, v. 2.0. If a copy of the MPL was not distributed with this +// file, You can obtain one at <https://mozilla.org/MPL/2.0/>. + +import hljs from "npm:highlight.js@11.8.0"; + +// [Redacted for brevity: function definitions for `processContent` and +// `applyHighlighting`.] + +globalThis.bjørnTransformMetadata = (metadata, _type) => { + processContent(metadata.content); + processContent(metadata.summary); +}; + +await import( + "https://git.ladys.computer/Beorn/blob_plain/0.2.1:/build.js" +); +``` + +<figcaption>Excerpt of this blog’s <a +href="https://git.ladys.computer/Blog/blob/4d65927:/build.js">current +build script</a>.</figcaption> +</figure> + +Or, to summarize, I used a _dynamic_ `import()` to defer running of the +Bjørn script until after my `globalThis.bjørnTransformMetadata` hook +had had a chance to be defined. (It still just processes the whole +directory the second it runs.) + +This is very dirty and hacky and also works very well. I’m satisfied +with the result! The actual code is a bit horrible, because of course +this is executing in an environment without a real <abbr +title="Document Object Model">D·O·M</abbr> and [the polyfill I am +using](https://git.ladys.computer/Lemon/blob/0.2.2:/window/mod.js) is +extremely minimal. I chose to use [Shades of +Purple](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS) as +my interim syntax highlighting theme as it seemed more healthy and less +bullshit than a lot of the other themes on the highlight.js website; +ideally at some point I will replace it with a theme of my own. +]]></sioc:content> + <dc11:rights rdf:parseType="Markdown"><![CDATA[ +Copyright © 2023 Lady <small>[Teddy Bear Appreciator]</small>. Some +rights reserved. + +This blogpost is licensed under a <a rel="license" +href="http://creativecommons.org/licenses/by/4.0/"><cite>Creative +Commons Attribution 4.0 International License</cite></a>. +]]></dc11:rights> +</awol:Entry>