HTML tags inside <code> get corrupted since v1.5.0

[Valahaar]

Summary

Nesting an HTML tag inside a <code> tag results in ,[object Object], being displayed.

Steps to reproduce

Code snippet:

st.write(
    """
<code>
<span style='color: red'>test</span> hello
</code>
""",
    unsafe_allow_html=True,
)

output:

,[object Object], hello

whereas the correct behavior should output test hello with "test" in red.

Is this a regression?

Yep. The bug was introduced in version 1.5.0 (version 1.4.0 works correctly)

Debug info

• Streamlit version: 1.5.0
• Python version: 3.8
• Using conda environment
• OS version: Ubuntu 20.04
• Browser version: Google Chrome 99.0.4844.51

Additional information

This is what streamlit actually returns to the browser for display. I guess that it has something to do with the react-markdown update that was done between 1.4.0 and 1.5.0.

• React markdown commit
• Comparison between 1.4.0 and 1.5.0
• Upgrade react-markdown issue

[kajarenc]

Thank you @Valahaar for reporting this issue!

yes, the problem is related to the markdown/HTML renderer.

In some edge cases (for example, when using HTML tags and styles inside the code tag, this can lead to incorrect output)

For a workaround, you can use the html component to draw pure HTML.

import streamlit.components.v1 as components

components.html("""<code>
<span style='color: red'>test</span> hello
</code>""")

We constantly work on improving the display of markdown and HTML, and reducing incorrect cases.
Thanks again!

[Valahaar]

Hi, unfortunately the iframe produced by components.html does not wrap around the full content, and defaults to an height of 150. Setting this manually is not possible as the content might have a dynamic length. Is there a workaround for this? If not, is there an expected ETA for a fix to the original issue?

Thank you :)

[Valahaar]

Hey @kajarenc , sorry for the ping, thought you might have missed my reply 😅

[kcarnold]

This affects a HuggingFace demo: https://huggingface.co/spaces/lvwerra/codeparrot-highlighting

which was highlighted in a recent blog: https://huggingface.co/blog/codeparrot

The components.html workaround seems to work:

with col2:
    st.subheader("Highlighted code")
    st.markdown('##')
    html_string = highlight_token_scores(token_list, scores, sep="")
    #st.markdown(html_string, unsafe_allow_html=True)
    components.html(html_string) # https://github.com/streamlit/streamlit/issues/4534
    st.markdown('##')