Support background colors for text (#8435)

## Describe your changes

Adds support for background colors for markdown text -- just as #5774
added support for colored text.

## Testing Plan

- Added JS unit and e2e tests

### Misc

- [Product
spec](https://www.notion.so/snowflake-corp/Spec-ff1deb2ea79740b08d65e188f32adaa4)
-
[Figma](https://www.figma.com/file/8swM6twk1gcrXtapAL2UgI/Colored-Text?type=design&node-id=215-1140&mode=design&t=A3eGLALZ4yg7tzBU-0)

---

**Contribution License Agreement**

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

e2e_playwright/st_markdown.py

@@ -48,6 +48,13 @@
 """
 )
 
+st.markdown(":blue-background[**Bold text within blue background**]")
+st.markdown(":red-background[*Italic text within red background*]")
+st.markdown(":rainbow-background[[Link](http://example.com) within rainbow background]")
+st.markdown(
+    ":green-background[LaTeX math within green background: $ax^2 + bx + c = 0$]"
+)
+
 with st.container():
     st.markdown("# some really long header " + " ".join(["lol"] * 10))
     st.markdown(
@@ -98,7 +105,14 @@
 
 # Some title
 Some text
-
 - :blue[blue], :green[green], :red[red], :violet[violet], :orange[orange], :gray[gray], :grey[grey], :rainbow[rainbow]
+- :blue-background[blue], :green-background[green], :red-background[red], :violet-background[violet], :orange-background[orange], :gray-background[gray], :grey-background[grey], :rainbow-background[rainbow]
+
+:blue-background[**Bold text within blue background**], :red-background[*Italic text within red background*]
+
+:rainbow-background[[Link](http://example.com) within rainbow background], :green-background[LaTeX math within green background: $ax^2 + bx + c = 0$]
+
+:violet-background[This is a repeating multiline string that wraps within purple background. This is a repeating multiline string that wraps within purple background.]
+
 """
 )

e2e_playwright/st_markdown_test.py

@@ -24,7 +24,7 @@ def test_markdown_all_elements_displayed(
 
     markdown_elements = themed_app.get_by_test_id("stMarkdown")
 
-    expect(markdown_elements).to_have_count(19)
+    expect(markdown_elements).to_have_count(23)
 
     # Snapshot one big markdown block containing a variety of elements to reduce number of snapshots
     assert_snapshot(
@@ -52,11 +52,29 @@ def test_displays_markdown(app: Page):
         "Some header 2",
         "Some header 3",
         "Col1Col2SomeData",
+        "Bold text within blue background",
+        "Italic text within red background",
+        "Link within rainbow background",
+        "LaTeX math within green background: ax2+bx+c=0ax^2 + bx + c = 0ax2+bx+c=0",
     ]
 
     for i in range(len(text)):
         expect(markdown_elements.nth(i)).to_have_text(text[i])
 
+    # Check that the style contains the correct background color
+    blue_background = markdown_elements.nth(12).locator("span").first
+    red_background = markdown_elements.nth(13).locator("span").first
+    rainbow_background = markdown_elements.nth(14).locator("span").first
+    green_background = markdown_elements.nth(15).locator("span").first
+
+    expect(blue_background).to_have_css("background-color", "rgba(28, 131, 225, 0.1)")
+    expect(red_background).to_have_css("background-color", "rgba(255, 43, 43, 0.1)")
+    expect(rainbow_background).to_have_css(
+        "background-image",
+        "linear-gradient(to right, rgba(255, 43, 43, 0.1), rgba(255, 227, 18, 0.1), rgba(255, 227, 18, 0.1), rgba(33, 195, 84, 0.1), rgba(28, 131, 225, 0.1), rgba(128, 61, 245, 0.1), rgba(88, 63, 132, 0.1))",
+    )
+    expect(green_background).to_have_css("background-color", "rgba(33, 195, 84, 0.1)")
+
     # Additional checks for specific elements like links
     expect(markdown_elements.nth(3).locator("a")).to_have_count(0)
     expect(markdown_elements.nth(4).locator("a")).to_have_attribute("href", "href")

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.test.tsx

@@ -22,6 +22,7 @@ import { screen, cleanup } from "@testing-library/react"
 import { render } from "@streamlit/lib/src/test_util"
 import IsSidebarContext from "@streamlit/lib/src/components/core/IsSidebarContext"
 import { colors } from "@streamlit/lib/src/theme/primitives/colors"
+import { transparentize } from "color2k"
 
 import StreamlitMarkdown, {
   LinkWithTargetBlank,
@@ -344,6 +345,43 @@ describe("StreamlitMarkdown", () => {
       cleanup()
     })
   })
+
+  it("properly adds background colors", () => {
+    const redbg = transparentize(colors.red80, 0.9)
+    const orangebg = transparentize(colors.yellow70, 0.9)
+    const yellowbg = transparentize(colors.yellow70, 0.9)
+    const greenbg = transparentize(colors.green70, 0.9)
+    const bluebg = transparentize(colors.blue70, 0.9)
+    const violetbg = transparentize(colors.purple70, 0.9)
+    const purplebg = transparentize(colors.purple90, 0.9)
+    const graybg = transparentize(colors.gray70, 0.9)
+
+    const colorMapping = new Map([
+      ["red", redbg],
+      ["blue", bluebg],
+      ["green", greenbg],
+      ["violet", violetbg],
+      ["orange", orangebg],
+      ["gray", graybg],
+      ["grey", graybg],
+      [
+        "rainbow",
+        `linear-gradient(to right, ${redbg}, ${orangebg}, ${yellowbg}, ${greenbg}, ${bluebg}, ${violetbg}, ${purplebg})`,
+      ],
+    ])
+
+    colorMapping.forEach(function (style, color) {
+      const source = `:${color}-background[text]`
+      render(<StreamlitMarkdown source={source} allowHTML={false} />)
+      const markdown = screen.getByText("text")
+      const tagName = markdown.nodeName.toLowerCase()
+      expect(tagName).toBe("span")
+      expect(markdown).toHaveStyle(`background-color: ${style}`)
+
+      // Removes rendered StreamlitMarkdown component before next case run
+      cleanup()
+    })
+  })
 })
 
 const getCustomCodeTagProps = (

frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx

@@ -43,7 +43,10 @@ import CodeBlock from "@streamlit/lib/src/components/elements/CodeBlock"
 import IsDialogContext from "@streamlit/lib/src/components/core/IsDialogContext"
 import IsSidebarContext from "@streamlit/lib/src/components/core/IsSidebarContext"
 import ErrorBoundary from "@streamlit/lib/src/components/shared/ErrorBoundary"
-import { getMarkdownTextColors } from "@streamlit/lib/src/theme"
+import {
+  getMarkdownTextColors,
+  getMarkdownBgColors,
+} from "@streamlit/lib/src/theme"
 
 import { LibContext } from "@streamlit/lib/src/components/core/LibContext"
 import {
@@ -290,6 +293,16 @@ export function RenderedMarkdown({
   const theme = useTheme()
   const { red, orange, yellow, green, blue, violet, purple, gray } =
     getMarkdownTextColors(theme)
+  const {
+    redbg,
+    orangebg,
+    yellowbg,
+    greenbg,
+    bluebg,
+    violetbg,
+    purplebg,
+    graybg,
+  } = getMarkdownBgColors(theme)
   const colorMapping = new Map(
     Object.entries({
       red: `color: ${red}`,
@@ -302,6 +315,16 @@ export function RenderedMarkdown({
       // Gradient from red, orange, yellow, green, blue, violet, purple
       rainbow: `color: transparent; background-clip: text; -webkit-background-clip: text; background-image: linear-gradient(to right,
         ${red}, ${orange}, ${yellow}, ${green}, ${blue}, ${violet}, ${purple});`,
+      "red-background": `background-color: ${redbg}`,
+      "blue-background": `background-color: ${bluebg}`,
+      "green-background": `background-color: ${greenbg}`,
+      "violet-background": `background-color: ${violetbg}`,
+      "orange-background": `background-color: ${orangebg}`,
+      "gray-background": `background-color: ${graybg}`,
+      "grey-background": `background-color: ${graybg}`,
+      // Gradient from red, orange, yellow, green, blue, violet, purple
+      "rainbow-background": `background: linear-gradient(to right,
+        ${redbg}, ${orangebg}, ${yellowbg}, ${greenbg}, ${bluebg}, ${violetbg}, ${purplebg});`,
     })
   )
   function remarkColoring() {
@@ -311,9 +334,17 @@ export function RenderedMarkdown({
           const nodeName = String(node.name)
           if (colorMapping.has(nodeName)) {
             const data = node.data || (node.data = {})
+            const style = colorMapping.get(nodeName)
             data.hName = "span"
-            data.hProperties = {
-              style: colorMapping.get(nodeName),
+            data.hProperties = data.hProperties || {}
+            data.hProperties.style = style
+            // Add class for background color for custom styling
+            if (
+              style &&
+              (/background-color:/.test(style) || /background:/.test(style))
+            ) {
+              data.hProperties.className =
+                (data.hProperties.className || "") + " has-background-color"
             }
           }
         }

frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts

@@ -79,6 +79,12 @@ export const StyledStreamlitMarkdown =
           border: `1px solid ${theme.colors.fadedText10}`,
         },
 
+        "span.has-background-color": {
+          padding: "0.125em 0.25em",
+          margin: "0",
+          borderRadius: theme.radii.md,
+        },
+
         ...(isToast
           ? {
               div: {