Using `st.markdown` with HTML is changing the look of the whole page

🎈 Using Streamlit
,
1

Summary

Displaying a Twitter share button using markdown is changing either the font, zoom level or both. See the screenshots below:

without html + markdown
without html + markdown1027×657 50.7 KB

with html + markdown
with html + markdown1028×655 42.1 KB

Steps to reproduce

From: streamlit-demos/01_🐦_Tweet_button.py at main · ShruAgarwal/streamlit-demos · GitHub

Code snippet:

import streamlit as st

st.title("Markdown bug")
st.caption('Output')

def tweet_button(tag: str, 
                 link: str, 
                text: str, 
                user: str):
  tweet = f"""
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
  <a href="https://twitter.com/intent/tweet?url={link}&text={text}&via={user}&hashtags={tag}">
  <button class="ui twitter button large ui button">
   <i class="twitter icon"></i>
    Tweet
  </button></a>
    """
st.markdown(tweet, unsafe_allow_html=True)

st.write("")
tweet_button(tag='streamlit, share', 
             link='https://30days.streamlit.app/', 
             text='Streamlit share button', 
             user='streamlit')

st.write("")
st.write('📌 NOTE: This button only works if you have a valid Twitter account.')

On https://shru-examples.streamlit.app, navigate to the page “Tweet button” and see the page change.

Expected behavior:

Display the markdown widget only

Actual behavior:

Display the markdown widget and change font/zoom level of all text on the page

Debug info

  • Streamlit version: 1.22.0
  • Python version: 3.9.2
  • OS version: Github Codespaces + Streamlit Cloud
  • Browser version: Brave + Firefox Focus

Requirements file

streamlit

Links

2

It is not the button.

import streamlit as st

st.title("[Semantic UI CSS](https://semantic-ui.com/)")
st.caption('A live demo')

if st.checkbox(label="Apply Semantic UI CSS"):
    st.markdown(
        '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">',
        unsafe_allow_html=True
    )
1 Like
3

Thanks! Oops, I hadn’t even considered that :sweat_smile:. I guess this is why it’s with unsafe_allow_html=True

If you know a better way to do this, please let me know :slightly_smiling_face:

4

Just remove the CSS link. From there you can get as fancy as you want by adding your own CSS.

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.