using-streamlit-markdown

Render GitHub-flavored Markdown and Streamlit extensions for styled UI text.

Updated Apr 20, 2025
One-click install
npx skills add https://github.com/cathayrisk/Anya --skill using-streamlit-markdown-cathayrisk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: using-streamlit-markdown
Source: https://github.com/cathayrisk/Anya/tree/main/skills/developing-with-streamlit/skills/using-streamlit-markdown
Command: npx skills add https://github.com/cathayrisk/Anya --skill using-streamlit-markdown-cathayrisk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides concise guidance for formatting and rendering GitHub-flavored Markdown and Streamlit-specific extensions so developers can create consistent, expressive, and readable UI text across Streamlit apps.

Core Features & Use Cases

  • Rich formatting: Use bold, italic, strikethrough, inline code, tables, and lists where supported to structure content.
  • Streamlit extensions: Apply colored text, colored backgrounds, badges, material icons, emojis, and LaTeX to enhance labels, metrics, and table cells.
  • Use Case: Improve dashboard clarity by adding colored status badges, material icons in tabs and buttons, and inline math in descriptions to make data explanations clearer.

Quick Start

Use the using-streamlit-markdown skill to format a widget label with a colored badge, a material icon, and an inline LaTeX expression.

Frequently Asked Questions about using-streamlit-markdown

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render colored text and badges in Streamlit markdown?

Render colored text and badges in Streamlit by applying Streamlit-specific markdown extensions to st.markdown or st.write. These extensions allow colored backgrounds, status badges, and styled text directly within dashboard UI elements.

Can I use LaTeX math and material icons in Streamlit widget labels?

Yes, Streamlit markdown supports inline LaTeX math and material icons in widget labels, captions, and tooltips. Label-subset rendering rules apply specific formatting extensions to enhance interactive app components.

What's the best way to format tables and metrics in Streamlit dashboards?

Format tables and metrics in Streamlit dashboards by applying GitHub-flavored markdown alongside Streamlit extensions to st.table cells and st.metric components. This approach adds colored backgrounds, emojis, and icons for clearer data explanations.

Does Streamlit markdown support strikethrough and inline code formatting?

Yes, Streamlit markdown supports GitHub-flavored formatting including strikethrough, inline code, bold, italic, tables, and lists. These standard formats work across st.write, captions, and other UI text elements.

Why are my Streamlit markdown emojis not rendering in st.write?

Streamlit markdown emojis may not render if unsupported syntax is passed to st.write or if label-subset rendering rules restrict certain extensions. Ensure GitHub-flavored markdown plus Streamlit-specific emoji syntax is correctly applied.

When do I need Streamlit-specific markdown extensions instead of standard markdown?

You need Streamlit-specific markdown extensions when standard GitHub-flavored markdown cannot produce colored text, badges, material icons, or LaTeX math for dashboard reports and interactive apps.