VL-CZ · VL-CZ · Nov 8, 2025 · Nov 7, 2025 · Nov 7, 2025 · Nov 7, 2025
diff --git a/docs/configuration/custom-static-pages.md b/docs/configuration/custom-static-pages.md
@@ -45,3 +45,5 @@ static-pages/
 ## Q1: How to install the library?
 ## A1: ...
 ```
+
+![](../imgs/img.png)
diff --git a/docs/imgs/img.png b/docs/imgs/img.png
diff --git a/src/RefDocGen/TemplateProcessors/Default/Templates/Layout/AppLayout.razor b/src/RefDocGen/TemplateProcessors/Default/Templates/Layout/AppLayout.razor
@@ -23,9 +23,9 @@
 <html lang="en">
 
 @{
-            string stylesUrl = UrlHelper.GetRelativeUrl("Static/styles.css", NestingLevel);
-            string customJsUrl = UrlHelper.GetRelativeUrl("Static/script.js", NestingLevel);
-            string boostrapJsUrl = UrlHelper.GetRelativeUrl("Static/bootstrap-5.3.5-dist.bundle.min.js", NestingLevel);
+        string stylesUrl = UrlHelper.GetRelativeUrl("Static/styles.css", NestingLevel);
+        string customJsUrl = UrlHelper.GetRelativeUrl("Static/script.js", NestingLevel);
+        string boostrapJsUrl = UrlHelper.GetRelativeUrl("Static/bootstrap-5.3.5-dist.bundle.min.js", NestingLevel);
 }
 
 <head>
@@ -91,7 +91,10 @@
     <link href="@stylesUrl" rel="stylesheet" />
 
     <!-- Highlight.js -->
-    <link id="highlight-js-styles" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/atom-one-dark.min.css">
+    <link id="highlight-js-styles" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/obsidian.min.css">
+
+    <!-- GLightBox -->
+    <link href="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/css/glightbox.min.css" rel="stylesheet">
 
     @if (CustomStyles is not null)
     {
@@ -132,14 +135,16 @@
 
     <!-- Highlight.js -->
     <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
-    <script>
 
-        // set Highlight.js theme according to Bootstrap theme
-        const highlightJsTheme = document.documentElement.getAttribute("data-bs-theme") == "dark" ? "atom-one-dark" : "atom-one-light";
-        document.getElementById("highlight-js-styles").setAttribute("href", `https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/${highlightJsTheme}.min.css`);
-
-        hljs.highlightAll();
+    <!-- GLightBox -->
+    <script src="https://cdn.jsdelivr.net/npm/glightbox@3.3.1/dist/js/glightbox.min.js"></script>
 
+    <script>
+        const lightbox = GLightbox({
+            selector: '.static-page-content a > img',
+            loop: true,
+            zoomable: true
+        });
     </script>
 
     <!-- Custom JS -->

diff --git a/src/RefDocGen/TemplateProcessors/Default/Templates/Scss/styles.scss b/src/RefDocGen/TemplateProcessors/Default/Templates/Scss/styles.scss
@@ -228,16 +228,34 @@ h6:hover .anchor-link {
             @extend .py-2;
         }
     }
+
+    a:has(> img) {
+        @extend .m-2;
+
+        > img {
+            width: 100%;
+            max-height: 100vh;
+            @extend .border;
+            @extend .border-1;
+            @extend .d-block;
+            @extend .mx-auto;
+
+            @media (min-width: 992px) { // Bootstrap "lg" breakpoint (laptops)
+                width: 75%;
+                max-height: 75vh;
+            }
+        }
+    }
 }
 
 // code blocks
-.refdocgen-code-block {
-    @extend .px-4;
-    @extend .m-2;
+pre .refdocgen-code-block, .static-page-content pre code {
+    @extend .px-3;
+    @extend .mx-2;
     @extend .border;
     @extend .border-1;
 }
 
 pre:has(> .refdocgen-code-block) {
-    @extend .my-2;
+    @extend .my-3;
 }
diff --git a/src/RefDocGen/TemplateProcessors/Default/Templates/Static/script.js b/src/RefDocGen/TemplateProcessors/Default/Templates/Static/script.js
@@ -70,6 +70,8 @@ function switchTheme() {
         htmlElement.setAttribute("data-bs-theme", newTheme);
         localStorage.setItem("refdocgen-theme", newTheme);
     }
+
+    highlightCodeBlocks(); // re-apply code highlighting for the new theme
 }
 
 /**
@@ -106,7 +108,7 @@ function setLanguageVisibility(selectedLang) {
  */
 function isAbsoluteUrl(url) {
     return /^(https?:)?\/\//.test(url); // check for 'http' or 'https' or '//', which is enough in our case
-                                        // https://stackoverflow.com/questions/10687099/how-to-test-if-a-url-string-is-absolute-or-relative
+    // https://stackoverflow.com/questions/10687099/how-to-test-if-a-url-string-is-absolute-or-relative
 }
 
 /**
@@ -143,6 +145,17 @@ function updateRelativeLinks() {
     }
 }
 
+/**
+ * Highlights all code blocks using Highlight.js library
+ */
+function highlightCodeBlocks() {
+    // set Highlight.js theme according to Bootstrap theme
+    const highlightJsTheme = document.documentElement.getAttribute("data-bs-theme") == "dark" ? "obsidian" : "atom-one-light";
+    document.getElementById("highlight-js-styles").setAttribute("href", `https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/${highlightJsTheme}.min.css`);
+
+    hljs.highlightAll();
+}
+
 function main() {
     const languageSelector = document.getElementById("language-selector");
     const savedLang = document.documentElement.getAttribute("data-language");
@@ -155,6 +168,9 @@ function main() {
     // load versions, and create version selector dropdown
     loadVersions();
 
+    // highlight code blocks
+    highlightCodeBlocks();
+
     // switch theme on click
     const themeSwitcher = document.getElementById("theme-switcher");
     themeSwitcher.addEventListener("click", switchTheme);

diff --git a/src/RefDocGen/TemplateProcessors/Default/Templates/Static/styles.css b/src/RefDocGen/TemplateProcessors/Default/Templates/Static/styles.css
diff --git a/src/RefDocGen/TemplateProcessors/Default/Templates/Static/styles.css.map b/src/RefDocGen/TemplateProcessors/Default/Templates/Static/styles.css.map
diff --git a/src/RefDocGen/TemplateProcessors/Shared/StaticPages/StaticPageProcessor.cs b/src/RefDocGen/TemplateProcessors/Shared/StaticPages/StaticPageProcessor.cs
@@ -1,4 +1,6 @@
 using AngleSharp;
+using AngleSharp.Dom;
+using AngleSharp.Html.Dom;
 using Markdig;
 using Microsoft.Extensions.Logging;
 using RefDocGen.Tools.Exceptions;
@@ -78,7 +80,7 @@ internal IEnumerable<StaticPage> GetStaticPages()
                     fileText = Markdown.ToHtml(md);
                 }
 
-                fileText = ResolveLinksToMarkdownFiles(fileText);
+                fileText = ProcessPage(fileText);
                 string pageDir = Path.GetRelativePath(staticPagesDirectory, file.DirectoryName ?? staticPagesDirectory);
 
                 yield return new(pageDir, Path.GetFileNameWithoutExtension(filePath), fileText);
@@ -124,18 +126,35 @@ internal void CopyNonPageFiles(string outputDirectory)
     }
 
     /// <summary>
-    /// Seaches for all links leading to Markdown files and updates them to point to the corresponding HTML pages.
+    /// Processes the static page, the following operations are performed:
+    /// <list type="number">
+    /// <item>Seaching for all links leading to Markdown files and updating them to point to the corresponding HTML pages.</item>
+    /// <item>Wrapping images inside &lt;a&gt; elements.</item>
+    /// </list>
     /// </summary>
     /// <param name="html">The provided HTML content.</param>
     /// <returns>The HTML content with all Markdown links resolved.</returns>
-    private string ResolveLinksToMarkdownFiles(string html)
+    private string ProcessPage(string html)
     {
         var config = Configuration.Default;
         var context = BrowsingContext.New(config);
 
         // Load the HTML document directly from the file
         var document = context.OpenAsync((req) => req.Content(html)).Result;
 
+        document = ResolveLinksToMarkdownFiles(document);
+        document = AddImageLinks(document);
+
+        return document.Body?.InnerHtml ?? "";
+    }
+
+    /// <summary>
+    /// Seaches for all links leading to Markdown files and updates them to point to the corresponding HTML pages.
+    /// </summary>
+    /// <param name="document">The provided HTML document.</param>
+    /// <returns>The HTML document with all Markdown links updated to point to the corresponding HTML pages.</returns>
+    private IDocument ResolveLinksToMarkdownFiles(IDocument document)
+    {
         var links = document.QuerySelectorAll("a[href]");
         const string href = "href";
 
@@ -148,6 +167,33 @@ private string ResolveLinksToMarkdownFiles(string html)
             }
         }
 
-        return document.Body?.InnerHtml ?? "";
+        return document;
+    }
+
+    /// <summary>
+    /// Wraps all <c>&lt;img&gt;</c> elements in the document with <c>&lt;a&gt;</c> elements,
+    /// pointing to the image source.
+    /// </summary>
+    /// <param name="document">The provided HTML document.</param>
+    /// <returns>The modified <see cref="IDocument"/> with images wrapped in <c>&lt;a&gt;</c> elements.</returns>
+    private IDocument AddImageLinks(IDocument document)
+    {
+        var images = document.QuerySelectorAll("img");
+
+        foreach (var image in images) // browse all images and wrap them inside <a> elements
+        {
+            if (image.GetAttribute("src") is string imagePath)
+            {
+                // Create <a> element
+                var link = document.CreateElement<IHtmlAnchorElement>();
+                link.Href = imagePath;
+
+                // Wrap the image with <a>
+                image.Replace(link);
+                _ = link.AppendChild(image);
+            }
+        }
+
+        return document;
     }
 }