Lady’s Gitweb - Blog/blob - 2023-05-03/blog_highlight/#entry.rdf

   1 <awol:Entry
   2         xml:lang="en"
   3         xmlns:awol="http://bblfish.net/work/atom-owl/2006-06-06/"
   4         xmlns:dc11="http://purl.org/dc/elements/1.1/"
   5         xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   6         xmlns:sioc="http://rdfs.org/sioc/ns#"
   7 >
   8         <dc11:title>Adding syntax highlighting to Lady’s Weblog</dc11:title>
   9         <dc11:date>2023-05-03T20:43:36-07:00</dc11:date>
  10         <dc11:abstract rdf:parseType="Markdown"><![CDATA[
  11 Recent changes in Bjørn mean I can type source code prettily now!
  12 ]]></dc11:abstract>
  13         <sioc:content rdf:parseType="Markdown"><![CDATA[
  14 As I [mentioned
  15 previously](https://blog.ladys.computer/2023-04-30/hello_world/), this
  16 blog is generated using a hacky Ecmascript+Deno static site generator I
  17 wrote called [Bjørn](https://git.ladys.computer/Beorn). I originally
  18 wrote Bjørn for a different blog, on a different site, and I published
  19 the source code with the intention that anyone who used it would use it
  20 as a template and hack on it as they saw fit. But, when I started this
  21 blog, I decided to _not_ do that (it sounded like a lot of work <abbr
  22 title="to be honest">t·b·h</abbr>)
  23 and instead just pulled in the latest version from the git repository
  24 with no changes :—
  25
  26 <figure>
  27
  28 ```make
  29 build:
  30         deno run --allow-read=. --allow-write=. $(BEORN)
  31 ```
  32
  33 <figcaption>The <a
  34 href="https://git.ladys.computer/Blog/blob/83bc234:/GNUmakefile"
  35 >original Makefile</a> rule for building this blog.</figcaption>
  36 </figure>
  37
  38 …Look, mostly I just did not want to have to maintain a fork of my own
  39 software just to have a blog. However, that has made it difficult
  40 to provide any meaningful customization to the compiled output,
  41 including things like the syntax highlighting seen on this page.
  42
  43 Bjørn was written and designed to be run as a shell script—not as a
  44 library. It processes the current directory immediately when it runs.
  45 So in order to add configurability, I had to define “hooks” on the
  46 global object, which Bjørn can check for at runtime and execute if they
  47 exist. (I made those changes in
  48 [7bea148](https://git.ladys.computer/Beorn/commitdiff/7bea148).) Then,
  49 in what is sure to give any respectable Javascript dev nightmares, I
  50 set up the build script for this blog as follows :—
  51
  52 <figure>
  53
  54 ```js
  55 #!/usr/bin/env -S deno run --allow-read --allow-write
  56
  57 // Copyright © 2023 Lady [@ Lady’s Computer].
  58 //
  59 // This Source Code Form is subject to the terms of the Mozilla Public
  60 // License, v. 2.0. If a copy of the MPL was not distributed with this
  61 // file, You can obtain one at <https://mozilla.org/MPL/2.0/>.
  62
  63 import hljs from "npm:highlight.js@11.8.0";
  64
  65 // [Redacted for brevity: function definitions for `processContent` and
  66 // `applyHighlighting`.]
  67
  68 globalThis.bjørnTransformMetadata = (metadata, _type) => {
  69   processContent(metadata.content);
  70   processContent(metadata.summary);
  71 };
  72
  73 await import(
  74   "https://git.ladys.computer/Beorn/blob_plain/0.2.1:/build.js"
  75 );
  76 ```
  77
  78 <figcaption>Excerpt of this blog’s <a
  79 href="https://git.ladys.computer/Blog/blob/4d65927:/build.js">current
  80 build script</a>.</figcaption>
  81 </figure>
  82
  83 Or, to summarize, I used a _dynamic_ `import()` to defer running of the
  84 Bjørn script until after my `globalThis.bjørnTransformMetadata` hook
  85 had had a chance to be defined. (It still just processes the whole
  86 directory the second it runs.)
  87
  88 This is very dirty and hacky and also works very well. I’m satisfied
  89 with the result! The actual code is a bit horrible, because of course
  90 this is executing in an environment without a real <abbr
  91 title="Document Object Model">D·O·M</abbr> and [the polyfill I am
  92 using](https://git.ladys.computer/Lemon/blob/0.2.2:/window/mod.js) is
  93 extremely minimal. I chose to use [Shades of
  94 Purple](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS) as
  95 my interim syntax highlighting theme as it seemed more healthy and less
  96 bullshit than a lot of the other themes on the highlight.js website;
  97 ideally at some point I will replace it with a theme of my own.
  98 ]]></sioc:content>
  99         <dc11:rights rdf:parseType="Markdown"><![CDATA[
 100 Copyright © 2023 Lady <small>[Teddy Bear Appreciator]</small>. Some
 101 rights reserved.
 102
 103 This blogpost is licensed under a <a rel="license"
 104 href="http://creativecommons.org/licenses/by/4.0/"><cite>Creative
 105 Commons Attribution 4.0 International License</cite></a>.
 106 ]]></dc11:rights>
 107 </awol:Entry>