Mastering Text and Markdown Display in Streamlit

Introduction

Streamlit is a powerful Python library that allows developers to create interactive web applications with ease. One of its fundamental features is the ability to display text and Markdown content, which is crucial for presenting information, instructions, and explanations within your app. In this guide, we'll explore the various ways to showcase text and Markdown in Streamlit, helping you create more engaging and informative applications.

Displaying Simple Text

Let's start with the basics. Streamlit provides a straightforward way to display text using the st.write() function:

import streamlit as st

st.write("Hello, Streamlit!")

This will display "Hello, Streamlit!" in your app. The st.write() function is versatile and can handle various data types, including strings, numbers, and even pandas DataFrames.

Using Markdown for Formatted Text

Markdown is a lightweight markup language that allows you to format text easily. Streamlit supports Markdown out of the box, enabling you to create rich text content. Use the st.markdown() function to display Markdown-formatted text:

st.markdown("# This is a header")
st.markdown("## This is a subheader")
st.markdown("*This text is italic*")
st.markdown("**This text is bold**")
st.markdown("- This is a bullet point")

This will render properly formatted text in your Streamlit app, with headers, emphasis, and bullet points.

Advanced Markdown Features

Streamlit's Markdown support extends beyond basic formatting. You can use it to create more complex elements:

Code Blocks

Display code snippets with syntax highlighting:

st.markdown("""
```python
def hello_world():
    print("Hello, World!")

""")

### Tables

Create simple tables using Markdown syntax:

```python
st.markdown("""
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | Value 1  | Value 2  |
| Row 2    | Value 3  | Value 4  |
""")

Links

Add hyperlinks to your text:

st.markdown("[Visit Streamlit's website](https://streamlit.io)")

Specialized Text Display Functions

Streamlit offers specialized functions for specific text display needs:

Title and Headers

Use st.title(), st.header(), and st.subheader() for consistent heading styles:

st.title("My Streamlit App")
st.header("Section 1")
st.subheader("Subsection 1.1")

Captions

Add captions to your elements using st.caption():

st.image("image.jpg")
st.caption("A beautiful landscape")

Code

Display code snippets with st.code():

code = '''
def hello():
    print("Hello, Streamlit!")
'''
st.code(code, language='python')

LaTeX Equations

For mathematical content, Streamlit supports LaTeX equations:

st.latex(r'''
    a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
    \sum_{k=0}^{n-1} ar^k =
    a \left(\frac{1-r^{n}}{1-r}\right)
''')

Text Input and Display

Combine text display with user input for interactive experiences:

user_input = st.text_input("Enter your name")
st.write(f"Hello, {user_input}!")

Conclusion

Mastering text and Markdown display in Streamlit opens up a world of possibilities for creating informative and visually appealing Python web applications. By combining these techniques, you can effectively communicate information, present data, and guide users through your app's functionality.

Remember to experiment with different text display methods to find the best fit for your specific use case. As you become more comfortable with these features, you'll be able to create increasingly sophisticated and user-friendly Streamlit applications.