From d053f332b9288506cf77bf15893b2f1ee1b3c167 Mon Sep 17 00:00:00 2001
From: katieboetig <katieboetig@gmail.com>
Date: Fri, 3 Oct 2025 14:40:20 -0400
Subject: [PATCH] docs(markdown): add hex color swatch example using
 unsafe_allow_html

---
 .../develop/api-reference/text/markdown.md    | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/content/develop/api-reference/text/markdown.md b/content/develop/api-reference/text/markdown.md
index f6daba668..4e882f18e 100644
--- a/content/develop/api-reference/text/markdown.md
+++ b/content/develop/api-reference/text/markdown.md
@@ -9,6 +9,8 @@ keywords: markdown, text, formatting, html, display
 
 ```python
 import streamlit as st
+import re
+import streamlit as st
 
 md = st.text_area('Type in your markdown string (without outer quotes)',
                   "Happy Streamlit-ing! :balloon:")
@@ -22,4 +24,22 @@ st.markdown('''{md}''')
 st.markdown(md)
 ```
 
-<Cloud name="doc-markdown1" height="500px" />
+<Cloud name="doc-markdown1" ```python
+import re
+import streamlit as st
+
+HEX = re.compile(r"^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$")
+
+def chip(h: str, size: int = 16) -> str:
+    # Return empty string for anything that is not a valid hex code
+    if not HEX.match(h):
+        return ""
+    return (
+        f'<span style="display:inline-block;width:{size}px;height:{size}px;'
+        f'background:{h};border:1px solid #ccc;margin-right:8px;'
+        f'vertical-align:middle;"></span> {h}'
+    )
+
+hex_values = ["#FF5733", "#1E90FF", "#2ECC71", "#8E44AD"]
+html = "".join(chip(h) for h in hex_values)
+st.markdown(html, unsafe_allow_html=True)
\ No newline at end of file