Passing variable containing text to markdown

[Abhishiek_Adhikarla]

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 .

[Charly_Wargnier]

Hi @Abhishiek_Adhikarla, and welcome to the Streamlit community!

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!

Best,
Charly

[snehankekre]

Thanks for tagging me, @Charly_Wargnier

@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

Happy Streamlit’ing!
Snehan

[Charly_Wargnier]

This is great @snehankekre!

[Abhishiek_Adhikarla]

Thanks a lot @snehankekre , this is brilliant