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


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

Steps to reproduce

From: streamlit-demos/01_馃惁 at main 路 ShruAgarwal/streamlit-demos 路 GitHub

Code snippet:

import streamlit as st

st.title("Markdown bug")

def tweet_button(tag: str, 
                 link: str, 
                text: str, 
                user: str):
  tweet = f"""
  <link rel="stylesheet" href="">
  <script src=""></script>
  <a href="{link}&text={text}&via={user}&hashtags={tag}">
  <button class="ui twitter button large ui button">
   <i class="twitter icon"></i>
st.markdown(tweet, unsafe_allow_html=True)

tweet_button(tag='streamlit, share', 
             text='Streamlit share button', 

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

On, navigate to the page 鈥淭weet 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



It is not the button.

import streamlit as st

st.title("[Semantic UI CSS](")
st.caption('A live demo')

if st.checkbox(label="Apply Semantic UI CSS"):
        '<link rel="stylesheet" href="">',
1 Like

Thanks! Oops, I hadn鈥檛 even considered that :sweat_smile:. I guess this is why it鈥檚 with unsafe_allow_html=True

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

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

1 Like

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