Allow customizing Shiki. Fix some highlighting bugs.

docs/src/basics/configuration.dj

@@ -31,4 +31,9 @@ html:
   # If you use TypeDoc, you'd want to set this to
   # path/to/typedoc/**/*.css
   ignore_css: ['some/css/you/dont/want.css']
+
+features:
+  syntax_highlighting:
+    theme_light: vitesse-light
+    theme_dark: vitesse-dark
 ```

docs/src/basics/custom_markup.dj

@@ -10,7 +10,7 @@ The details of this markup are likely to change, since Djockey is experimental.
 
 ## Overriding HTML tags
 
-Djot does not ([yet](https://github.com/jgm/djot/issues/240)) support arbitrary HTML tags in its input or output. Djockey works around this by postprocessing Djot's HTML output. Whenever you add a `tag=foo`{.language-plaintext} attribute, Djockey will replace the element's tag with the attribute's value.
+Djot does not ([yet](https://github.com/jgm/djot/issues/240)) support arbitrary HTML tags in its input or output. Djockey works around this by postprocessing Djot's HTML output. Whenever you add a `tag=foo`{.language-text} attribute, Djockey will replace the element's tag with the attribute's value.
 
 {% can't use .dj-djot-demo for features that require the entire Djockey pipeline (yet) %}
 

docs/src/basics/frontmatter.dj

@@ -5,7 +5,7 @@ order: 1
 
 You can customize the title of your doc by adding YAML between `---` lines at the top, like this:
 
-```plaintext
+```
 ---
 title: Custom Title
 ---

src/plugins/djotDemoPlugin.ts

@@ -32,7 +32,7 @@ export class DjotDemoPlugin implements DjockeyPlugin {
                 tag: "code_block",
                 lang: "djot",
                 text: node.text,
-                attributes: { class: "language-plaintext" },
+                attributes: { class: "language-text" },
                 pos: structuredClone(node.pos),
               },
               {

src/plugins/syntaxHighlighting.ts

@@ -22,26 +22,34 @@ let nextID = 0;
 export class SyntaxHighlightingPlugin implements DjockeyPlugin {
   name = "Syntax Highlighting";
 
-  languages = new Set(["djot"].concat(Object.keys(bundledLanguages)));
+  languages = new Set(["djot", "text"].concat(Object.keys(bundledLanguages)));
 
   highlightRequests: Record<string, { text: string; lang: string }> = {};
   highlightResults: Record<string, string> = {};
 
   djotHighlighter!: HighlighterGeneric<BundledLanguage, BundledTheme>;
 
-  constructor(public config: DjockeyConfigResolved) {}
+  themeLight: string;
+  themeDark: string;
+
+  constructor(public config: DjockeyConfigResolved) {
+    this.themeLight =
+      config.features?.syntax_highlighting?.theme_light ?? "vitesse-light";
+    this.themeDark =
+      config.features?.syntax_highlighting?.theme_dark ?? "vitesse-dark";
+  }
 
   async setup() {
     this.djotHighlighter = await createHighlighter({
       langs: [djotTextmateGrammar as unknown as LanguageRegistration],
-      themes: ["vitesse-light", "vitesse-dark"],
+      themes: [this.themeLight, this.themeDark],
     });
   }
 
   async highlight(text: string, lang: string): Promise<string> {
     const themes = {
-      light: "vitesse-light",
-      dark: "vitesse-dark",
+      light: this.themeLight,
+      dark: this.themeDark,
     };
 
     try {
@@ -69,19 +77,19 @@ export class SyntaxHighlightingPlugin implements DjockeyPlugin {
       code_block: (node: CodeBlock) => {
         if (node.attributes?.hlRequestID) return; // Already scheduled
 
-        if (!this.languages.has(node.lang ?? "<none>")) {
-          return;
-        }
-
         if (node.lang === "mermaid") {
           // Special case: Mermaid renders as a diagram
           return;
         }
 
+        const lang = this.languages.has(node.lang ?? "<none>")
+          ? node.lang ?? "text"
+          : "text";
+
         const hlRequestID = `${nextID++}`;
         this.highlightRequests[hlRequestID] = {
           text: node.text,
-          lang: node.lang ?? "text",
+          lang,
         };
         const result: CodeBlock = {
           ...node,

src/types.ts

@@ -24,6 +24,13 @@ export type DjockeyConfig = {
     footer_text: string;
     ignore_css?: string[];
   };
+
+  features?: {
+    syntax_highlighting?: {
+      theme_light: string;
+      theme_dark: string;
+    };
+  };
 };
 
 export type DjockeyConfigResolved = DjockeyConfig & {