From 6fc79a7184fccc7a4d2ccd0959a2bb7b801a3ce1 Mon Sep 17 00:00:00 2001
From: Mochammad Fadhlan Al-Ghiffari <136257088+MFA-G@users.noreply.github.com>
Date: Sun, 28 Jun 2026 23:27:07 +0700
Subject: [PATCH] fix(docs): highlight code blocks after client-side navigation
 (#3287) (#3288)

* fix(docs): highlight all code blocks after client-side navigation

The docs site highlights code on full page load via an inline
hljs.highlightAll(), which targets the 'pre code' selector and so
highlights every fenced block, including those without a language tag.

The client-side navigation path (pathchange handler) instead selected
only code[class^="language"], so fenced blocks written without a
language hint were left unhighlighted after in-app navigation while
appearing correctly on a hard reload.

Align the pathchange handler with highlightAll() by selecting 'pre code'
and skipping blocks hljs has already processed (data-highlighted=yes),
keeping the pass idempotent across repeated pathchange events.

Fixes #3287

* fix(docs): hoist hljs.configure and scope highlight to docs content

Address review nits on the pathchange highlight pass:
- Move hljs.configure({ ignoreUnescapedHTML: true }) out of the per-element
  loop since it is global config and only needs to run once.
- Scope the selector to '.docs-content pre code' so the re-highlight pass
  only touches the swapped-in docs body and leaves code blocks elsewhere
  on the page untouched.
---
 src/docs/src/assets/js/example.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/docs/src/assets/js/example.js b/src/docs/src/assets/js/example.js
index 57d384827..ccab242da 100644
--- a/src/docs/src/assets/js/example.js
+++ b/src/docs/src/assets/js/example.js
@@ -75,21 +75,22 @@ $(document).on('pathchange', function (e) {
         $(this).find('.icon').html(icons[$(this).data('icon-active')]);
     });
 
-    // highlight code
-    $('code[class^=\'language\']').each(function () {
-        var $this = $(this);
-        if ( $this.attr('data-highlighted') === 'yes' ) {
-            // Remove the attribute or set it to 'no'
-            $this.removeAttr('data-highlighted');
-        }
-        // Now you can re-highlight
-        else {
-            try {
-                hljs.configure({ ignoreUnescapedHTML: true });
-                hljs.highlightElement(this);
-            } catch (e) {
-                console.error('Error: Failed to highlight.', e);
-            }
+    // Highlight code. Match the same `pre code` selector hljs.highlightAll()
+    // uses on full page load — selecting only `code[class^="language"]` skips
+    // fenced blocks written without a language tag, so they stayed unhighlighted
+    // after client-side navigation while showing up correctly on a hard reload.
+    // Scope to `.docs-content` so we only re-highlight the swapped-in docs body
+    // and leave code blocks elsewhere on the page untouched.
+    hljs.configure({ ignoreUnescapedHTML: true });
+    $('.docs-content pre code').each(function () {
+        // Skip blocks hljs has already processed so repeated pathchanges don't
+        // log "Element previously highlighted" and re-run on unchanged nodes.
+        if ( $(this).attr('data-highlighted') === 'yes' ) return;
+
+        try {
+            hljs.highlightElement(this);
+        } catch (e) {
+            console.error('Error: Failed to highlight.', e);
         }
     });
 });