Passing variable containing text to markdown

Using Streamlit
1

Hi All,

I have a text stored in a variable as an output of a process , I want to display this text , since st.text or st.write do not give me any leverage on the font size or color , I thought I can use markdown. I am still not sure how can I pass a variable containing value to markdown to lets say make the text bold with font-family:Courier .

2

Hi @Abhishiek_Adhikarla, and welcome to the Streamlit community! :balloon::raised_hands:

As far as I’m aware, you can’t add variables in an st.mardown element, and you’d have to rely on underlying HTML/CSS wizardry to achieve this.

I’m cc’ing @snehankekre in case he knows any st.mardown tricks (he knows a lot of tricks! :grin:

Best,
Charly

2 Likes
3

Thanks for tagging me, @Charly_Wargnier :grinning_face_with_smiling_eyes:

@Abhishiek_Adhikarla: here’s an illustrative example showing how to pass a variable containing text to markdown, with the ability to specify font size (using f-strings). You can always extend it to customize font families:

import streamlit as st

variable_output = st.text_input("Enter some text", value="Streamlit is awesome")
font_size = st.slider("Enter a font size", 1, 300, value=30)

html_str = f"""
<style>
p.a {{
  font: bold {font_size}px Courier;
}}
</style>
<p class="a">{variable_output}</p>
"""

st.markdown(html_str, unsafe_allow_html=True)

Output

font-size

Happy Streamlit’ing! :balloon:
Snehan

7 Likes
4

This is great @snehankekre! :star_struck:

5

Thanks a lot @snehankekre , this is brilliant

1 Like
6

Thanks @snehankekre !!! BTW, this is also required when passing in a variable for a SQL query. I spent 1 hour trying to figure out why I was getting a weird pandas dataframe error. Went away as soon as I used an f-string.

1 Like