style code

lib/custom_html.typ

@@ -11,3 +11,4 @@
   // Role 'radiogroup' is needed because of bug in chromium with screenreaders (https://lyra.horse/blog/2025/08/you-dont-need-js/#fn:10)
   html.elem("theme-picker", attrs: (aria-label: label, role: "radiogroup"), body)
 }
+#let code-block = html.elem.with("code-block")

lib/html_body.typ

@@ -1,5 +1,6 @@
 #import "./custom_html.typ" as chtml
 #import "./theme_picker.typ": theme_picker
+#import "./theme_colors.typ": theme_colors_css
 
 /// Make the body of the webpage
 #let html_body(
@@ -11,8 +12,8 @@
   logo_alt,
   body
 ) = {
+  theme_colors_css
   ```raw-css
-
   site-wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -40,6 +41,20 @@
         margin-top: 15px;
       }
     }
+
+    code-block {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      pre {
+        width: min-content;
+        padding: 8px;
+        border-radius: 8px;
+        background-color: var(--color-code-bg);
+        box-shadow: inset 0px 0px 5px 0px #000;
+      }
+    }
   }
   ```
   html.body({

lib/html_head.typ

@@ -86,22 +86,6 @@
       }
     }}
 
-    ```raw-css
-    :root {
-      color-scheme: light dark;
-      &:has(#theme-light:checked) {
-        color-scheme: light;
-      }
-      &:has(#theme-dark:checked) {
-        color-scheme: dark;
-      }
-
-      --color-border: light-dark(#414868, #414868);
-
-      --color-button-shadow: light-dark(#888, #000);
-      --color-button-focus: light-dark(#000, #FFF);
-    }
-    ```
     html.style(get-css())
 
   })

lib/html_utils.typ

@@ -1,3 +1,5 @@
+#import "./custom_html.typ": code-block
+
 #let css-list = state("css-list", ())
 
 /// Add string `css` to `css-list` if not already present
@@ -11,6 +13,16 @@
 }
 
 #let html_show(body) = {
-  show raw.where(lang: "raw-css"): it => add-css(it.text)
+  show raw: it => { 
+    if it.lang == "raw-css" { 
+      // remove code and add it to css style
+      add-css(it.text) 
+    } else if it.block { 
+      // wrap <pre><code> inside a <code-block>
+      code-block(it) 
+    } else {
+      it
+    }
+  }
   body
 }

lib/main.typ

@@ -22,9 +22,9 @@
   og-type: "website",
   /// Name of the site for metadata of the page
   site-name: none,
-  /// Description of the site for metadata #TODO default to document.description
+  /// Description of the site for metadata, default to document.description
   description: none,
-  /// Author of the site for metadata #TODO default to document.author
+  /// Author of the site for metadata, default to document.author
   author: none,
   /// Additional stylesheet for the page: must be a list of url
   stylesheets: (),
@@ -35,10 +35,6 @@
   body
 ) = {
   show: html_show
-
-  if title == none {
-    title = context document.title
-  }
   html.html(lang: lang, {
     html_head(
       url,

lib/theme_colors.typ

@@ -0,0 +1,19 @@
+
+#let theme_colors_css = ```raw-css
+:root {
+  color-scheme: light dark;
+  &:has(#theme-light:checked) {
+    color-scheme: light;
+  }
+  &:has(#theme-dark:checked) {
+    color-scheme: dark;
+  }
+
+  --color-border: light-dark(#414868, #414868);
+
+  --color-button-shadow: light-dark(#888, #000);
+  --color-button-focus: light-dark(#000, #FFF);
+
+  --color-code-bg: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))
+}
+```