From dae46e3cdf21b5514907098b9d0c93c005956fb2 Mon Sep 17 00:00:00 2001
From: Myrddin Dundragon <myrddin@cybermages.tech>
Date: Tue, 13 Jan 2026 22:54:05 -0500
Subject: [PATCH] Trying to add syntax highlighting for code

---
 bard/Cargo.toml             |  2 +-
 bard/src/components/post.rs | 10 ++++++++++
 bard/src/page.rs            |  4 ++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/bard/Cargo.toml b/bard/Cargo.toml
index 055c423..88d1b6b 100644
--- a/bard/Cargo.toml
+++ b/bard/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "bard"
-version = "0.3.17"
+version = "0.3.18"
 edition = "2024"
 description = "Dioxus components that will display a Tavern blogging system Blog."
 repository = "/CyberMages/tavern"
diff --git a/bard/src/components/post.rs b/bard/src/components/post.rs
index 986293f..20b2dce 100644
--- a/bard/src/components/post.rs
+++ b/bard/src/components/post.rs
@@ -128,6 +128,16 @@ pub fn PostHeader(tale: Tale, adventurer: Option<Adventurer>) -> Element
 #[component]
 pub fn Story(text: String) -> Element
 {
+   use_effect(||
+   {
+      spawn(async
+      {
+         document::eval("hljs.highlightAll();")
+            .await
+            .expect("Error highlighting code");
+      });
+   });
+
    rsx!
    {
       div
diff --git a/bard/src/page.rs b/bard/src/page.rs
index e25fc78..7c6eba1 100644
--- a/bard/src/page.rs
+++ b/bard/src/page.rs
@@ -45,6 +45,10 @@ fn BlogLayout() -> Element
          }
       }
 
+      // Setup the system to use Highlight.js for code blocks.
+      document::Stylesheet { href: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/vs2015.css" }
+      document::Script { src: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js" }
+
       Outlet::<Page> {}
    }
 }