UI: improve the performance of code syntax highlighting

This commit is contained in:
oobabooga 2024-05-06 16:51:05 -07:00
parent 0b193b8553
commit d5bde7babc

View File

@ -144,7 +144,6 @@ targetElement.addEventListener("scroll", function() {
// Create a MutationObserver instance // Create a MutationObserver instance
const observer = new MutationObserver(function(mutations) { const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
updateCssProperties(); updateCssProperties();
const firstChild = targetElement.children[0]; const firstChild = targetElement.children[0];
@ -158,8 +157,8 @@ const observer = new MutationObserver(function(mutations) {
document.getElementById("Generate").style.display = "flex"; document.getElementById("Generate").style.display = "flex";
} }
doSyntaxHighlighting(); doSyntaxHighlighting();
});
if(!isScrolled) { if(!isScrolled) {
targetElement.scrollTop = targetElement.scrollHeight; targetElement.scrollTop = targetElement.scrollHeight;
@ -215,6 +214,9 @@ function doSyntaxHighlighting() {
indexes.forEach((index) => { indexes.forEach((index) => {
const element = elements[index]; const element = elements[index];
// Tag this element to prevent it from being highlighted twice
element.setAttribute("data-highlighted", "true");
// Perform syntax highlighting // Perform syntax highlighting
const codeBlocks = element.querySelectorAll("pre code"); const codeBlocks = element.querySelectorAll("pre code");
@ -231,8 +233,6 @@ function doSyntaxHighlighting() {
], ],
}); });
// Tag this element to indicate it has been syntax highlighted
element.setAttribute("data-highlighted", "true");
}); });
observer.observe(targetElement, config); observer.observe(targetElement, config);