fix(docs): highlight code blocks after client-side navigation (#3287) (#3288)
Maintain Release Merge PR / update-release-pr (push) Has been cancelled
Notify HeyPuter / notify (push) Has been cancelled
release-please / release-please (push) Has been cancelled

* 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.
This commit is contained in:
Mochammad Fadhlan Al-Ghiffari
2026-06-28 23:27:07 +07:00
committed by GitHub
parent 50039571b6
commit 6fc79a7184
+16 -15
View File
@@ -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);
}
});
});