From 36edc88e5823d9e358b5b63c956641ab5affd9ed Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Sun, 8 Feb 2026 23:02:14 +0200
Subject: [PATCH 1/2] Add place holder for breadcrumb

---
 templates/modern/layout/_master.tmpl |  2 +-
 templates/modern/src/nav.ts          | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/templates/modern/layout/_master.tmpl b/templates/modern/layout/_master.tmpl
index caf1e520ec0..4aff6196fbd 100644
--- a/templates/modern/layout/_master.tmpl
+++ b/templates/modern/layout/_master.tmpl
@@ -111,7 +111,7 @@
           {{/_disableToc}}
 
           {{^_disableBreadcrumb}}
-          <nav id="breadcrumb"></nav>
+          <nav id="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item">&nbsp;</li></ol></nav>
           {{/_disableBreadcrumb}}
         </div>
 
diff --git a/templates/modern/src/nav.ts b/templates/modern/src/nav.ts
index 1d55e89800c..012d613edda 100644
--- a/templates/modern/src/nav.ts
+++ b/templates/modern/src/nav.ts
@@ -85,13 +85,15 @@ export async function renderNavbar(): Promise<NavItem[]> {
 }
 
 export function renderBreadcrumb(breadcrumb: (NavItem | TocNode)[]) {
-  const container = document.getElementById('breadcrumb')
+  if (breadcrumb.length === 0) {
+    return
+  }
+
+  const container = document.querySelector<HTMLOListElement>('#breadcrumb .breadcrumb')
   if (container) {
+    container.innerHTML = ''
     render(
-      html`
-        <ol class="breadcrumb">
-          ${breadcrumb.map(i => html`<li class="breadcrumb-item"><a href="${i.href}">${breakWordLit(i.name)}</a></li>`)}
-        </ol>`,
+      breadcrumb.map(i => html`<li class="breadcrumb-item"><a href="${i.href}">${breakWordLit(i.name)}</a></li>`),
       container)
   }
 }

From 198b1978c6528f8aa215df6802b6a8b056f2ced0 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Sun, 8 Feb 2026 23:35:16 +0200
Subject: [PATCH 2/2] Preserve space for code blocks before hljs loads

---
 templates/modern/src/highlight.scss | 16 ++++++++++++++++
 templates/modern/src/highlight.ts   |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/templates/modern/src/highlight.scss b/templates/modern/src/highlight.scss
index febc386cab1..8dc26e4d1f9 100644
--- a/templates/modern/src/highlight.scss
+++ b/templates/modern/src/highlight.scss
@@ -12,6 +12,22 @@
   @include meta.load-css("highlight.js/scss/vs2015");
 }
 
+/* default code block style before hljs loads */
+pre code {
+  background-color: #f5f5f5;
+  color: #000;
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+@include bootstrap.color-mode(dark) {
+  pre code {
+    background: #1E1E1E;
+    color: #DCDCDC;
+  }
+}
+
 .hljs {
   background-color: #f5f5f5;
 
diff --git a/templates/modern/src/highlight.ts b/templates/modern/src/highlight.ts
index 4cce830bea2..af9358eb60a 100644
--- a/templates/modern/src/highlight.ts
+++ b/templates/modern/src/highlight.ts
@@ -13,7 +13,7 @@ export async function highlight() {
   const { configureHljs } = await options()
   configureHljs?.(hljs)
 
-  document.querySelectorAll('pre code').forEach(block => {
+  codeBlocks.forEach(block => {
     hljs.highlightElement(block as HTMLElement)
   })