2 files changed, 29 insertions, 2 deletions
diff --git a/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts b/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts
index 07071441..55b63a0d 100644
--- a/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts
+++ b/vhosts/blog/nuldoc-src/djot/djot2ndoc.ts
@@ -130,6 +130,9 @@ function processCodeBlock(node: DjotCodeBlock): Element {
   if (node.lang) {
     attributes.set("language", node.lang);
   }
+  if (node.attributes?.filename) {
+    attributes.set("filename", node.attributes.filename);
+  }
   return {
     kind: "element",
     name: "codeblock",
diff --git a/vhosts/blog/nuldoc-src/djot/to_html.ts b/vhosts/blog/nuldoc-src/djot/to_html.ts
index cc74e538..b64c3d99 100644
--- a/vhosts/blog/nuldoc-src/djot/to_html.ts
+++ b/vhosts/blog/nuldoc-src/djot/to_html.ts
@@ -366,6 +366,7 @@ async function transformAndHighlightCodeBlockElement(doc: Document) {
     }
 
     const language = n.attributes.get("language") || "text";
+    const filename = n.attributes.get("filename");
     const sourceCodeNode = n.children[0] as Text | RawHTML;
     const sourceCode = sourceCodeNode.content.trimEnd();
 
@@ -377,10 +378,33 @@ async function transformAndHighlightCodeBlockElement(doc: Document) {
       },
     });
 
-    sourceCodeNode.content = highlighted;
-    sourceCodeNode.raw = true;
     n.name = "div";
     n.attributes.set("class", "codeblock");
     n.attributes.delete("language");
+
+    if (filename) {
+      n.attributes.delete("filename");
+
+      n.children = [
+        {
+          kind: "element",
+          name: "div",
+          attributes: new Map([["class", "filename"]]),
+          children: [{
+            kind: "text",
+            content: filename,
+            raw: false,
+          }],
+        },
+        {
+          kind: "text",
+          content: highlighted,
+          raw: true,
+        },
+      ];
+    } else {
+      sourceCodeNode.content = highlighted;
+      sourceCodeNode.raw = true;
+    }
   });
 }