added support for images in markdown, and for rendered html

example/lumina.md

@@ -20,6 +20,9 @@ Her smallest creation:
 
 - [Bernardo](bernardo)
 
+Bernardo looks like this:
+![bernardo-picture](bernardo.png)
+
 ---
 
 ## Enemy

example/sword-of-conjuring.md

@@ -1,3 +1,19 @@
 # Sword of Conjuring
 
 This is a sword what do you expect
+
+Here's some rendered html:
+
+```html
+<div style="background: #2d3149; padding: 10px; border-radius: 10px; border: 2px solid #8aadf4;">
+    <p>You can use <strong>raw HTML</strong> inside wiki pages:</p>
+    <button onclick="alert('It works!')">Click Me</button>
+</div>
+```
+
+```rendered_html
+<div style="background: #2d3149; padding: 10px; border-radius: 10px; border: 2px solid #8aadf4;">
+    <p>You can use <strong>raw HTML</strong> inside wiki pages:</p>
+    <button onclick="alert('It works!')">Click Me</button>
+</div>
+```

example/sword-of-conjuring.toml

@@ -1,7 +1,7 @@
 title = "Sword of Conjuring"
 category = "Items"
-image = "azrak.png"
+image = "sword-of-conjuring.png"
-content_file = "azrak.md"
+content_file = "sword-of-conjuring.md"
 
 [infobox]
 "Weapon type" = "Sword"

src/rendering.rs

@@ -59,6 +59,29 @@ impl<'a> Iterator for Renderer<'a> {
                 }))
             }
 
+            Event::Start(Tag::Image {
+                link_type,
+                dest_url,
+                title,
+                id,
+            }) => {
+                let mut new_url = dest_url.to_string();
+
+                if !new_url.contains("://")
+                    && !new_url.starts_with('/')
+                    && !new_url.starts_with("./")
+                {
+                    new_url = format!("images/{}", new_url);
+                }
+
+                Some(Event::Start(Tag::Image {
+                    link_type,
+                    dest_url: CowStr::Boxed(new_url.into_boxed_str()),
+                    title,
+                    id,
+                }))
+            }
+
             Event::Start(Tag::CodeBlock(kind)) => {
                 let mut code_content = String::new();
 
@@ -75,14 +98,17 @@ impl<'a> Iterator for Renderer<'a> {
                     CodeBlockKind::Fenced(ref language) => language.as_ref(),
                 };
 
-                let rendered_html = render_code_to_html(&code_content, lang);
+                if lang == "rendered_html" {
+                    return Some(Event::Html(CowStr::Boxed(code_content.into_boxed_str())));
+                }
 
+                let rendered_html = render_code_to_html(&code_content, lang);
                 let mut escaped_code = String::new();
                 let _ = escape_html(&mut escaped_code, &code_content);
-
+                let rendered_html = rendered_html.replace(
-                let rendered_html =
+                    "<pre",
-                    rendered_html.replace("<pre", &format!("<pre data-code=\"{}\"", escaped_code));
+                    &format!("<pre data-lang=\"{}\" data-code=\"{}\"", lang, escaped_code),
-
+                );
                 Some(Event::Html(CowStr::Boxed(rendered_html.into_boxed_str())))
             }
             _ => return Some(event),

templates/page.html

@@ -43,21 +43,34 @@
 
 <script>
 document.querySelectorAll('pre[data-code]').forEach((block) => {
+    const lang = block.getAttribute('data-lang') || 'text';
+    const code = block.getAttribute('data-code');
+
     const wrapper = document.createElement('div');
     wrapper.className = 'code-wrapper';
-    block.parentNode.insertBefore(wrapper, block);
+
-    wrapper.appendChild(block);
+    const header = document.createElement('div');
+    header.className = 'code-header';
+
+    const langLabel = document.createElement('span');
+    langLabel.className = 'code-lang';
+    langLabel.innerText = lang;
 
     const button = document.createElement('button');
     button.className = 'copy-button';
     button.type = 'button';
     button.innerHTML = '<i class="fa-regular fa-copy"></i>';
-    wrapper.appendChild(button);
+
+    header.appendChild(langLabel);
+    header.appendChild(button);
+
+    block.parentNode.insertBefore(wrapper, block);
+    wrapper.appendChild(header);
+    wrapper.appendChild(block);
 
     button.addEventListener('click', async () => {
-        const text = block.getAttribute('data-code');
         try {
-            await navigator.clipboard.writeText(text);
+            await navigator.clipboard.writeText(code);
             button.innerHTML = '<i class="fa-solid fa-check"></i>';
             button.classList.add('copied');
             setTimeout(() => {

templates/style.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap");
 
 :root {
   --bg-color: #181926;
@@ -6,25 +6,24 @@
   --lighter-bg: #24273a;
   --text-main: #cad3f5;
   --text-muted: #a5adcb;
-
   --accent: #8aadf4;
   --accent-glow: #c6a0f6;
-  
   --code-bg: var(--container-bg);
   --border-color: #494d64;
   --selection-bg: rgba(91, 96, 120, 0.4);
-
   --radius-sm: 6px;
   --radius-md: 12px;
-  --container-width: 1000px; /* Wider for wiki layout */
+  --container-width: 1000px;
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 body {
   background-color: var(--bg-color);
   color: var(--text-main);
-  font-family: 'Inter', system-ui, sans-serif;
+  font-family: "Inter", system-ui, sans-serif;
   line-height: 1.6;
   margin: 0;
   padding-top: 80px;
@@ -36,12 +35,9 @@ body {
 #content {
   width: 100%;
   max-width: var(--container-width);
-  padding: 0 20px;
+  padding: 0 20px 35px;
-  padding-bottom: 35px;
 }
 
-/* --- Wiki Layout --- */
-
 .wiki-header {
   border-bottom: 2px solid;
   border-image-source: linear-gradient(to right, var(--accent), transparent);
@@ -64,7 +60,7 @@ body {
 
 .wiki-body {
   flex: 1;
-    min-width: 0; /* Prevents overflow in flex items */
+  min-width: 0;
 }
 
 .wiki-sidebar {
@@ -88,7 +84,6 @@ body {
   }
 }
 
-/* --- Sidebar Components --- */
 .sidebar-image img {
   width: 100%;
   border-radius: var(--radius-sm);
@@ -131,12 +126,26 @@ body {
   text-align: right;
 }
 
-/* --- Standard Markdown Elements --- */
+h2 {
-h2 { font-size: 1.8rem; color: var(--accent); margin-top: 2rem; }
+  font-size: 1.8rem;
-h3 { font-size: 1.5rem; color: #fff; }
+  color: var(--accent);
-p { margin-bottom: 1rem; }
+  margin-top: 2rem;
-a { color: var(--accent); text-decoration: none; }
+}
-a:hover { color: var(--accent-glow); text-decoration: underline; }
+h3 {
+  font-size: 1.5rem;
+  color: #fff;
+}
+p {
+  margin-bottom: 1rem;
+}
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+a:hover {
+  color: var(--accent-glow);
+  text-decoration: underline;
+}
 
 blockquote {
   border-left: 4px solid var(--accent);
@@ -146,23 +155,16 @@ blockquote {
   color: var(--text-muted);
 }
 
-/* Code blocks */
-pre {
-    background: var(--container-bg);
-    padding: 1rem;
-    border-radius: var(--radius-md);
-    overflow-x: auto;
-    border: 1px solid var(--border-color);
-}
 code {
-    font-family: 'JetBrains Mono', monospace;
+  font-family: "JetBrains Mono", monospace;
   font-size: 0.9em;
 }
 
-/* Navigation Bar */
 nav {
   position: fixed;
-    top: 0; left: 0; right: 0;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 60px;
   background: var(--container-bg);
   border-bottom: 1px solid var(--border-color);
@@ -171,12 +173,18 @@ nav {
   padding: 0 2rem;
   z-index: 100;
 }
-nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
+
+nav a {
+  font-weight: bold;
+  font-size: 1.2rem;
+  color: var(--text-main);
+}
 
 .changelog-list {
   list-style: none;
   padding: 0;
 }
+
 .changelog-entry {
   background: var(--container-bg);
   border: 1px solid var(--border-color);
@@ -184,6 +192,7 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
   margin-bottom: 15px;
   border-radius: var(--radius-sm);
 }
+
 .changelog-meta {
   font-size: 0.85rem;
   color: var(--text-muted);
@@ -194,42 +203,51 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
   gap: 10px;
   align-items: baseline;
 }
+
 .changelog-day {
   color: var(--accent);
   font-weight: bold;
 }
+
 .changelog-time {
   color: var(--text-muted);
-    font-family: 'JetBrains Mono', monospace;
+  font-family: "JetBrains Mono", monospace;
   font-size: 0.8em;
 }
+
 .changelog-author {
   margin-left: auto;
 }
+
 .changelog-message {
   font-size: 1.05rem;
   margin-bottom: 10px;
   font-weight: 500;
 }
+
 .changelog-files {
   font-size: 0.85rem;
   margin-top: 8px;
 }
+
 .changelog-files summary {
   cursor: pointer;
   color: var(--text-muted);
   list-style: none;
 }
+
 .changelog-files summary:hover {
   color: var(--text-main);
 }
+
 .changelog-files summary::before {
-    content: '▶';
+  content: "▶";
   font-size: 0.7em;
   margin-right: 5px;
   display: inline-block;
   transition: transform 0.2s;
 }
+
 .changelog-files details[open] summary::before {
   transform: rotate(90deg);
 }
@@ -238,10 +256,9 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
   margin: 5px 0 0 0;
   padding-left: 20px;
   color: var(--text-muted);
-    font-family: 'JetBrains Mono', monospace;
+  font-family: "JetBrains Mono", monospace;
 }
 
-
 .header-category {
   font-size: 1.2rem;
   color: var(--text-muted);
@@ -257,3 +274,110 @@ nav a { font-weight: bold; font-size: 1.2rem; color: var(--text-main); }
   border-bottom: 1px solid var(--border-color);
   padding-bottom: 0.2rem;
 }
+
+.wiki-body img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1.5rem auto;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+}
+
+.wiki-body img + em {
+  display: block;
+  text-align: center;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  margin-top: -1rem;
+  margin-bottom: 1.5rem;
+}
+
+button {
+  display: inline-block;
+  color: #fff;
+  background: var(--container-bg);
+  padding: 0.6rem 1.2rem;
+  border: solid 1px var(--accent);
+  border-radius: var(--radius-md);
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.2s ease;
+}
+
+button.disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+  border-color: var(--text-muted);
+}
+
+.code-wrapper {
+  position: relative;
+  margin: 1.5rem 0;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--lighter-bg);
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.code-lang {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.75rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  letter-spacing: 0.05em;
+}
+
+pre {
+  background: var(--container-bg);
+  padding: 1rem;
+  overflow-x: auto;
+  margin: 0 !important;
+  border: none !important;
+  border-radius: 0 !important;
+}
+
+.copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  position: static;
+  padding: 4px 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  transition: all 0.2s ease;
+}
+
+.copy-button:hover {
+  background: var(--selection-bg);
+  color: var(--accent);
+  border-color: var(--border-color);
+}
+
+.copy-button:active {
+  transform: translateY(2px);
+}
+
+pre::-webkit-scrollbar {
+  height: 8px;
+}
+
+pre::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}