Fixed bugs related to code folding

README.md

@@ -33,7 +33,6 @@ In short: **`MaterialX + ProperDocs`** is an equivalent replacement for `mkdocs-
 
 - Added Markdown source support for **AI agents** to provide structured content, reducing token consumption by over 80%
 - Refactored the search module with a brand-new architecture, greatly improving **search quality** and **indexing efficiency**. It supports multi-provider mode, chunked indexing, on-demand loading, index compression, multilingual search and cross-domain search. It is suitable for various complex scenarios and large-scale sites, and can handle sites with more than 100,000 pages, see [Search](https://jaywhj.github.io/mkdocs-materialx/plugins/search)
-    - Actual tests show its search accuracy and performance are 50%~80% higher than Zensical
 - Added code block download & **auto-collapse/expand** long code blocks features, see [Code blocks](https://jaywhj.github.io/mkdocs-materialx/reference/code-blocks#code-collapse-expand)
 - Added the new **Steps** component for clearer, more intuitive display of procedures and workflows, see [Steps](https://jaywhj.github.io/mkdocs-materialx/reference/steps)
 - Added next-generation date & author plugin, see: [Add document dates & authors](https://jaywhj.github.io/mkdocs-materialx/setup/adding-document-dates-authors)

docs/changelog/index.md

@@ -209,9 +209,6 @@ __Changes__:
 - Added support for navigation paths (breadcrumbs)
 - Fixed #8519: Vector accents do not render when using KaTeX
 
-  [Zensical]: https://zensical.org
-  [Read the full announcement on our blog]: ../blog/posts/zensical.md
-
 ### 9.6.23 <small>November 1, 2025</small> { id="9.6.23" }
 
 - Updated Burmese translation

docs/differences.md

@@ -43,7 +43,6 @@ Therefore, MaterialX will adhere to the following goals and principles:
 
 - Added Markdown source support for **AI agents** to provide structured content, reducing token consumption by over 80%
 - Refactored the search module with a brand-new architecture, greatly improving **search quality** and **indexing efficiency**. It supports multi-provider mode, chunked indexing, on-demand loading, index compression, multilingual search and cross-domain search. It is suitable for various complex scenarios and large-scale sites, and can handle sites with more than 100,000 pages, see [Search](plugins/search.md){target="_blank"}
-    - Actual tests show its search accuracy and performance are 50%~80% higher than Zensical
 - Added code block download & **auto-collapse/expand** long code blocks features, see [Code blocks](reference/code-blocks.md#code-collapse-expand){target="_blank"}
 - Added the new **Steps** component for clearer, more intuitive display of procedures and workflows, see [Steps](reference/steps.md){target="_blank"}
 - Added next-generation date & author plugin, see: [Date and Authors](setup/adding-document-dates-authors.md){target="_blank"}

docs/plugins/search.md

@@ -8,7 +8,7 @@ icon: lucide/search
 
 MaterialX `10.2.0` fully refactors the search module with a brand-new architecture, greatly improving **search quality** and **indexing efficiency**.
 
-It supports multi-provider mode, chunked indexing, on-demand loading, index compression, multilingual search and cross-domain search. It is suitable for various complex scenarios and large-scale sites, and can handle sites with more than 100,000 pages. Actual tests show its search accuracy and performance are 50%~80% higher than Zensical.
+It supports multi-provider mode, chunked indexing, on-demand loading, index compression, multilingual search and cross-domain search. It is suitable for various complex scenarios and large-scale sites, and can handle sites with more than 100,000 pages.
 
 [Pagefind]{target="_blank"} is the default provider. You may switch back to the original [Lunr]{target="_blank"} when using it in an [offline]{target="_blank"} environment (opened via the `file://` protocol).
 

docs/setup/setting-up-site-search.md

@@ -9,7 +9,7 @@ search:
 
 MaterialX `10.2.0` fully refactors the search module with a brand-new architecture, greatly improving **search quality** and **indexing efficiency**.
 
-It supports multi-provider mode, chunked indexing, on-demand loading, index compression, multilingual search and cross-domain search. It is suitable for various complex scenarios and large-scale sites, and can handle sites with more than 100,000 pages. Actual tests show its search accuracy and performance are 50%~80% higher than Zensical.
+It supports multi-provider mode, chunked indexing, on-demand loading, index compression, multilingual search and cross-domain search. It is suitable for various complex scenarios and large-scale sites, and can handle sites with more than 100,000 pages.
 
 [Pagefind]{target="_blank"} is the default provider. You may switch back to the original [Lunr]{target="_blank"} when using it in an [offline]{target="_blank"} environment (opened via the `file://` protocol).
 

material/templates/base.html

@@ -74,7 +74,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.d7aee198.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.38e25eb3.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a45159b5.min.css' | url }}">
@@ -311,7 +311,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.44453a05.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.d66651fd.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {{ script | script_tag }}
       {% endfor %}

src/templates/assets/javascripts/components/content/code/_/index.ts

@@ -252,6 +252,25 @@ function downloadFromUrl(source: string) {
   triggerDownload(url.toString(), "")
 }
 
+/* ----------------------------------------------------------------------------
+ * Highlight helpers
+ * ------------------------------------------------------------------------- */
+
+const CODE_HIGHLIGHT_WIDTH = "--md-code-hl-width"
+
+/**
+ * Stretch highlighted lines to the full scroll width of a code block
+ *
+ * @param el - Code block element
+ */
+function updateCodeHighlightWidth(el: HTMLElement) {
+  el.style.removeProperty(CODE_HIGHLIGHT_WIDTH)
+
+  const width = el.scrollWidth
+  if (width > 0)
+    el.style.setProperty(CODE_HIGHLIGHT_WIDTH, `${width}px`)
+}
+
 /* ----------------------------------------------------------------------------
  * Code folding helpers
  * ------------------------------------------------------------------------- */
@@ -301,6 +320,35 @@ function getCodeLineCount(el: HTMLElement, spans: HTMLElement[]): number {
     : 0
 }
 
+function getCodeFoldHeight(
+  container: HTMLElement,
+  el: HTMLElement,
+  spans: HTMLElement[],
+  lines: number
+): number {
+  const lastVisibleLine = spans[lines - 1]
+  if (lastVisibleLine) {
+    return Math.ceil(
+      lastVisibleLine.getBoundingClientRect().bottom -
+      container.getBoundingClientRect().top
+    )
+  }
+
+  /* Fall back to line metrics when `line_spans` isn't configured */
+  const style = getComputedStyle(el)
+  const fontSize = parseFloat(style.fontSize) || 13.6
+  const lineHeight = parseFloat(style.lineHeight) || fontSize * 1.4
+  const paddingTop = parseFloat(style.paddingTop) || 0
+  const borderTop = parseFloat(style.borderTopWidth) || 0
+  const contentTop =
+    el.getBoundingClientRect().top -
+    container.getBoundingClientRect().top +
+    borderTop +
+    paddingTop
+
+  return Math.ceil(contentTop + lineHeight * lines)
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -320,6 +368,10 @@ export function watchCodeBlock(
 ): Observable<Overflow> {
   return watchElementSize(el)
     .pipe(
+      tap(() => {
+        if (!el.classList.contains("md-code__content") && el.querySelector(".hll"))
+          updateCodeHighlightWidth(el)
+      }),
       map(({ width }) => {
         const content = getElementContentSize(el)
         return {
@@ -623,13 +675,8 @@ export function mountCodeBlock(
 
       if (foldThreshold && foldThreshold > 0 && lineCount > foldThreshold) {
         const updateFoldHeight = () => {
-          const lastVisibleLine = spans[foldThreshold - 1] as HTMLElement
-          if (!lastVisibleLine)
-            return
-
-          const visibleHeight = Math.ceil(
-            lastVisibleLine.getBoundingClientRect().bottom -
-            container.getBoundingClientRect().top
+          const visibleHeight = getCodeFoldHeight(
+            container, el, spans, foldThreshold
           )
           if (visibleHeight <= 0)
             return

src/templates/assets/stylesheets/main/extensions/pymdownx/_highlight.scss

@@ -159,6 +159,7 @@
   // Highlighted line
   .hll {
     display: block;
+    min-width: var(--md-code-hl-width, max-content);
     padding: 0 px2em(16px, 13.6px);
     margin: 0 px2em(-16px, 13.6px);
     background-color: var(--md-code-hl-color--light);
@@ -206,12 +207,18 @@
     margin-right: px2em(16px, 13.6px);
     margin-left: px2em(-16px, 13.6px);
     color: var(--md-default-fg-color--light);
+    white-space: pre;
     content: attr(data-linenos);
     user-select: none;
     background-color: var(--md-code-bg-color);
     box-shadow: px2rem(-1px) 0 var(--md-default-fg-color--lightest) inset;
   }
 
+  // Code block line numbers (inline)
+  code .linenos:not([data-linenos]) {
+    margin-right: px2em(16px, 13.6px);
+  }
+
   // Code block line anchors - Chrome and Safari seem to have a strange bug
   // where scroll margin is not applied to anchors inside code blocks. Setting
   // positioning to absolute seems to fix the problem. Interestingly, this does
@@ -221,6 +228,12 @@
   code a[id] {
     position: absolute;
     visibility: hidden;
+
+    // Align the targeted line directly below the sticky header. The default
+    // anchor offset includes extra spacing which exposes the preceding line.
+    &:target {
+      --md-scroll-offset: #{px2rem(24px)};
+    }
   }
 
   // Copying in progress - this class is set before the content is copied and
@@ -326,6 +339,12 @@
   }
 }
 
+// Inline code block line numbers
+code a[href^="#__codelineno"] {
+  color: var(--md-default-fg-color--light);
+  text-decoration: none;
+}
+
 // Code block line numbers container
 .linenodiv a {
   color: inherit;