The code chunk background color in chatgpt would blink

[honghh2018]

Hi developer,

 The  return stream code in llama3.2 using hljs.highlight(code, {language: lang}).value;  would blink the black background-color 
 It very confuse for this display - background in the code appears and disappears intermittently, flickering - in html markdown show.
 
 The blink video showing below:

https://github.com/user-attachments/assets/643e5b21-cdc0-4d50-873c-aff1951be806
The code lying below:
marked.setOptions({
highlight: function (code, lang) {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(code, {language: lang}).value;
}
return hljs.highlightAuto(code).value;
},
});
const txt = document.querySelector('.send textarea');
txt.addEventListener('input', () => {
txt.style.height = 'auto';
txt.style.height = txt.scrollHeight + 'px';
});
const main = document.querySelector('.main');

function _createUserContent(username, content) {
    const dom = document.createElement('div');
    dom.className = 'user block';
    dom.innerHTML = ` <div class="container">
<div class="avatar">
  ${username}
</div>
<div class="content markdown-body">
  ${_normalizeContent(content)}
</div>

`; const hitBottom = isBottom(); main.appendChild(dom); if (hitBottom) { document.documentElement.scrollTo(0, 1000000); } }

function _normalizeContent(content) {
    const html = marked.parse(content, {
        breaks: true,
        gfm: true,
    });
    return html;
}

How to fix this issue? and advice would be appreciated
Best,
hanhuihong

[honghh2018]

Had anyone hear this issue?

[joshgoebel]

Looks like you're re-rendering the response element every time there is new content vs just adding content to the existing element - causing it to flash as it appears/disappears. This has nothing to do with the Highlight.js library itself - it's your implementation.