`st.code` is not displayed correctly if the code block is not in the viewport when the page loads

[Lexachoc]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

Please go to https://docs.streamlit.io/develop/api-reference/text/st.code to see the issue.

The code block will display:

as long as the code block is not in the viewport when page reload.

Reproducible Code Example

import streamlit as st

code = '''def hello():
    print("Hello, Streamlit!")'''
st.code(code, language="python")

Steps To Reproduce

1. Go to https://docs.streamlit.io/develop/api-reference/text/st.code
2. make sure the code block is not in the current viewport:

3. Scroll down to see what's going on.
   

Expected Behavior

In Chrome, the browser remembers the scroll position, so just reload, and the code block will diplay correctly as it is in the viewport now.

Current Behavior

st.code is not displayed correctly if the code block is not in the viewport when the page loads.

It shows:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

the copy function is correct.

def hello():
    print("Hello, Streamlit!")

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: 1.41.1
• Python version:
• Operating System: Windows 10
• Browser: Chrome

Additional Information

No response

[github-actions]

If this issue affects you, please react with a 👍 (thumbs up emoji) to the initial post.

Your feedback helps us prioritize which bugs to investigate and address first.

[Lexachoc]

This seems to be an issue with react-syntax-highlighter.

Same issues:
react-syntax-highlighter/react-syntax-highlighter#513
react-syntax-highlighter/react-syntax-highlighter#538
react-syntax-highlighter/react-syntax-highlighter#565

[raethlein]

Thanks a lot @Lexachoc for taking your time to opening the issue with so much details and especially linking to the other issues and root cause 🚀 Based on those threads, it sounds like this recently became a problem when we switched to vite. I am not sure why those builds are different though. The threads mention some workarounds which are worth for us to check out (e.g. this one)

[jrieke]

Aaah I also saw this happen randomly a few times! @raethlein I think we should actually make this a P2, if not even a P1, because st.code (which is used by 4% of apps) is basically broken in a lot of cases now.

[jrieke]

Yeah if it's even broken on the docs page, then definitely a P1 in my eyes, and we should try to fix it until the next release if possible.