Skip to content

Conversation

@jensonjohnathon
Copy link
Contributor

@jensonjohnathon jensonjohnathon commented Nov 23, 2025

Describe your changes

I have added markdown rendering components to value and delta

It is functional like in the screenshot but I do not know how to deal with conflicting chars like - or $

I see 3 options:

  1. add backslashes \ or back ticks ` to these values, so that they get disabled
  2. add a new markdown enabled parameter to st.metric so that the user will have to choose if they want to have markdown behavior or not
  3. add it like this with a hint for the user that he should use back ticks or backslashes when adding $

Please let me know what behavior is most desirable.

Code in my Screenshot:

st.metric(
    label="Temperature",
    value="70 °F $ **markdown**",
    delta=r"-1.2 °F \$ *markdown* $x^2 + y^2 = z^2$",
)

Screenshot or video (only for visual changes)

image

GitHub Issue Link (if applicable)

Testing Plan

  • Added unit & e2e tests.

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.


Note

Render st.metric value and delta using Markdown instead of plain text.

  • Frontend (Metric):
    • Render metric value and delta with StreamlitMarkdown (Markdown enabled, allowHTML=false, inheritFont).
    • Preserve existing spacing by padding metricValue with spaces.
    • Minor refactor: destructure element.body as metricValue.

Written by Cursor Bugbot for commit df8ebfa. Configure here.

@snyk-io
Copy link
Contributor

snyk-io bot commented Nov 23, 2025

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues
Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@sfc-gh-lmasuch sfc-gh-lmasuch added change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Nov 24, 2025
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR adds markdown rendering support to the value and delta parameters of the st.metric component by replacing plain text rendering with the StreamlitMarkdown component. This enables users to use markdown formatting (bold, italic, code blocks, LaTeX math, etc.) in metric values and delta indicators.

Key changes:

  • Value and delta fields now use StreamlitMarkdown component with allowHTML={false} and inheritFont props
  • Markdown rendering is consistent with the label field, which already supported markdown

jensonjohnathon and others added 2 commits November 24, 2025 14:16
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
@lukasmasuch lukasmasuch self-assigned this Nov 26, 2025
@lukasmasuch lukasmasuch requested a review from Copilot December 1, 2025 20:03
@lukasmasuch lukasmasuch added the security-assessment-completed Security assessment has been completed for PR label Dec 1, 2025
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 6 out of 12 changed files in this pull request and generated 3 comments.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The color change of the metric delta is from the previous color changes not related to this PR.

Copy link
Collaborator

@lukasmasuch lukasmasuch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 I added a e2e & unit tests, docstring update and applied some limitations to the markdown.

Comment on lines +102 to +104
The value can optionally contain GitHub-flavored Markdown,
including the Markdown directives described in the ``body``
parameter of ``st.markdown``.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In theory, this also just supports the limited set of markdown directives we support in all labels. However, copy-pasting the specifics for value & delta as done in label seems a bit much. Maybe we need to find a shorter version on how to explain the limitations or mention that its the same supported in the label parameter? cc @sfc-gh-dmatthews

@lukasmasuch lukasmasuch merged commit a34a2e7 into streamlit:develop Dec 1, 2025
40 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support Markdown in the value and delta of st.metric

4 participants