From 81444379ffa1e60e0b0c243e879f808c20b5026c Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Sun, 14 Dec 2025 09:26:12 -0800 Subject: [PATCH 1/5] feature/code-block-description --- components/blocks/code.js | 2 + components/blocks/code.module.css | 8 ++ .../concepts/configuration/theming-fonts.md | 78 ++++++++++++------- 3 files changed, 59 insertions(+), 29 deletions(-) diff --git a/components/blocks/code.js b/components/blocks/code.js index b02f5ef2d..5aa3af356 100644 --- a/components/blocks/code.js +++ b/components/blocks/code.js @@ -60,6 +60,7 @@ const Code = ({ img, lines, hideCopyButton = false, + filename, }) => { // Create a ref for the code element. const codeRef = useRef(null); @@ -131,6 +132,7 @@ const Code = ({ {showLanguage && ( {displayLanguage} )} + {filename && {filename}} ); diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css index ee9119bce..8e07cff39 100644 --- a/components/blocks/code.module.css +++ b/components/blocks/code.module.css @@ -16,6 +16,14 @@ @apply uppercase tracking-wider pr-4; } +.Filename { + @apply ml-4 font-mono text-sm text-gray-60; +} + +:global(.dark) .Filename { + @apply text-gray-50; +} + .HasHeader { @apply rounded-t-none !important; } diff --git a/content/develop/concepts/configuration/theming-fonts.md b/content/develop/concepts/configuration/theming-fonts.md index edcd6ed7e..d16571b62 100644 --- a/content/develop/concepts/configuration/theming-fonts.md +++ b/content/develop/concepts/configuration/theming-fonts.md @@ -15,7 +15,8 @@ Streamlit comes with [Source Sans](https://fonts.adobe.com/fonts/source-sans), [ To use these default faults, you can set each of the following configuration options to `"sans-serif"` (Source Sans), `"serif"` (Source Serif), or `"monospace"` (Source Code) in `config.toml`: -```toml + + [theme] font = "sans-serif" headingFont = "sans-serif" @@ -24,7 +25,8 @@ codeFont = "monospace" font = "sans-serif" headingFont = "sans-serif" codeFont = "monospace" -``` + + You can set the base font weight and size in the `[theme]` table in `config.toml`. These can't be configured separately in the sidebar. @@ -45,22 +47,26 @@ When fonts are not declared in `[theme.sidebar]`, Streamlit will inherit each op In the following `config.toml` example, Streamlit uses Source Serif in the main body of the app and Source Sans in the sidebar. -```toml + + [theme] font = "serif" [theme.sidebar] font = "sans-serif" -``` + + ## Externally hosted fonts If you use a font service like Google Fonts or Adobe Fonts, you can use those fonts directly by encoding their font family (name) and CSS URL into a single string of the form `{font_name}:{css_url}`. If your font family includes a space, use inner quotes on the font family. In the following `config.toml` example, Streamlit uses Nunito font for all text except code, which is Space Mono instead. Space Mono has inner quotes because it has a space. -```toml + + [theme] font = "Nunito:https://fonts.googleapis.com/css2?family=Nunito&display=swap" codeFont = "'Space Mono':https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" -``` + + @@ -100,7 +106,8 @@ A line-by-line explanation of this example is available in a [tutorial](/develop `.streamlit/config.toml`: -```toml + + [server] enableStaticServing = true @@ -119,20 +126,23 @@ url="app/static/NotoSansMono-VariableFont_wdth,wght.ttf" [theme] font="noto-sans" codeFont="noto-mono" -``` + + Directory structure: -```none + + project_directory/ ├── .streamlit/ -│ └── config.toml +│ └── config.toml ├── static/ -│ ├── NotoSans-Italic-VariableFont_wdth,wght.ttf -│ ├── NotoSans-VariableFont_wdth,wght.ttf -│ └── NotoSansMono-VariableFont_wdth,wght.ttf +│ ├── NotoSans-Italic-VariableFont_wdth,wght.ttf +│ ├── NotoSans-VariableFont_wdth,wght.ttf +│ └── NotoSansMono-VariableFont_wdth,wght.ttf └── streamlit_app.py -``` + + ### Example 2: Define an alternative font with static font files @@ -149,7 +159,8 @@ A line-by-line explanation of this example is available in a [tutorial](/develop `.streamlit/config.toml`: -```toml + + [server] enableStaticServing = true @@ -176,21 +187,24 @@ weight=700 [theme] font="tuffy" -``` + + Directory structure: -```none + + project_directory/ ├── .streamlit/ -│ └── config.toml +│ └── config.toml ├── static/ -│ ├── Tuffy-Bold.ttf -│ ├── Tuffy-BoldItalic.ttf -│ ├── Tuffy-Italic.ttf -│ └── Tuffy-Regular.ttf +│ ├── Tuffy-Bold.ttf +│ ├── Tuffy-BoldItalic.ttf +│ ├── Tuffy-Italic.ttf +│ └── Tuffy-Regular.ttf └── streamlit_app.py -``` + + ## Font fallbacks @@ -206,11 +220,13 @@ A line-by-line explanation of this example is available in a [tutorial](/develop `.streamlit/config.toml`: -```toml + + [theme] font="Nunito:https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000, sans-serif" codeFont="'Space Mono':https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap, monospace" -``` + + @@ -222,17 +238,21 @@ If any of your font family names contain spaces and you are declaring a fallback You can set the base font size for your app in pixels. You must specify the base font size as an integer. The following configuration is equivalent to the default base font size of 16 pixels: -```toml + + [theme] baseFontSize=16 -``` + + Additionally, you can set the font size for code blocks. The font size can be declared in pixels or rem. The following configuration is equivalent to the default code font size of 0.875rem. -```toml + + [theme] codeFontSize="0.875rem" -``` + + From 083c3176fbbe911c178b2f38921e360800459943 Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Sun, 14 Dec 2025 09:55:52 -0800 Subject: [PATCH 2/5] Filename color --- components/blocks/code.module.css | 6 +----- content/develop/concepts/configuration/theming-fonts.md | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css index 8e07cff39..6f00a5e47 100644 --- a/components/blocks/code.module.css +++ b/components/blocks/code.module.css @@ -17,11 +17,7 @@ } .Filename { - @apply ml-4 font-mono text-sm text-gray-60; -} - -:global(.dark) .Filename { - @apply text-gray-50; + @apply font-mono text-sm leading-6 pr-4; } .HasHeader { diff --git a/content/develop/concepts/configuration/theming-fonts.md b/content/develop/concepts/configuration/theming-fonts.md index d16571b62..fad1ca2a7 100644 --- a/content/develop/concepts/configuration/theming-fonts.md +++ b/content/develop/concepts/configuration/theming-fonts.md @@ -192,7 +192,7 @@ font="tuffy" Directory structure: - + project_directory/ ├── .streamlit/ From 70867edcee63ec1c0ca3e74ffa3886de8fd413ae Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Sun, 14 Dec 2025 10:12:47 -0800 Subject: [PATCH 3/5] Replace language with filename; optionally both --- components/blocks/code.js | 4 +++- content/develop/concepts/configuration/theming-fonts.md | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/components/blocks/code.js b/components/blocks/code.js index 5aa3af356..e8efad6f7 100644 --- a/components/blocks/code.js +++ b/components/blocks/code.js @@ -61,6 +61,7 @@ const Code = ({ lines, hideCopyButton = false, filename, + filenameOnly = true, }) => { // Create a ref for the code element. const codeRef = useRef(null); @@ -125,7 +126,8 @@ const Code = ({ // Extract language identifier for display const langId = languageClass?.substring(9) || language || "python"; const displayLanguage = languageDisplayNames[langId] || langId; - const showLanguage = langId.toLowerCase() !== "none"; + const showLanguage = + langId.toLowerCase() !== "none" && !(filenameOnly && filename); const Header = (
diff --git a/content/develop/concepts/configuration/theming-fonts.md b/content/develop/concepts/configuration/theming-fonts.md index fad1ca2a7..7938d4999 100644 --- a/content/develop/concepts/configuration/theming-fonts.md +++ b/content/develop/concepts/configuration/theming-fonts.md @@ -131,7 +131,7 @@ codeFont="noto-mono" Directory structure: - + project_directory/ ├── .streamlit/ From 8c25237e66f92c53e741c64806b6c1c43aefb57b Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Fri, 19 Dec 2025 10:56:54 -0800 Subject: [PATCH 4/5] Revert content changes --- .../concepts/configuration/theming-fonts.md | 64 +++++++------------ 1 file changed, 23 insertions(+), 41 deletions(-) diff --git a/content/develop/concepts/configuration/theming-fonts.md b/content/develop/concepts/configuration/theming-fonts.md index 7938d4999..2b7a1a655 100644 --- a/content/develop/concepts/configuration/theming-fonts.md +++ b/content/develop/concepts/configuration/theming-fonts.md @@ -47,26 +47,22 @@ When fonts are not declared in `[theme.sidebar]`, Streamlit will inherit each op In the following `config.toml` example, Streamlit uses Source Serif in the main body of the app and Source Sans in the sidebar. - - +```toml [theme] font = "serif" [theme.sidebar] font = "sans-serif" - - +``` ## Externally hosted fonts If you use a font service like Google Fonts or Adobe Fonts, you can use those fonts directly by encoding their font family (name) and CSS URL into a single string of the form `{font_name}:{css_url}`. If your font family includes a space, use inner quotes on the font family. In the following `config.toml` example, Streamlit uses Nunito font for all text except code, which is Space Mono instead. Space Mono has inner quotes because it has a space. - - +```toml [theme] font = "Nunito:https://fonts.googleapis.com/css2?family=Nunito&display=swap" codeFont = "'Space Mono':https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" - - +``` @@ -106,8 +102,7 @@ A line-by-line explanation of this example is available in a [tutorial](/develop `.streamlit/config.toml`: - - +```toml [server] enableStaticServing = true @@ -126,13 +121,11 @@ url="app/static/NotoSansMono-VariableFont_wdth,wght.ttf" [theme] font="noto-sans" codeFont="noto-mono" - - +``` Directory structure: - - +```none project_directory/ ├── .streamlit/ │ └── config.toml @@ -141,8 +134,7 @@ project_directory/ │ ├── NotoSans-VariableFont_wdth,wght.ttf │ └── NotoSansMono-VariableFont_wdth,wght.ttf └── streamlit_app.py - - +``` ### Example 2: Define an alternative font with static font files @@ -159,8 +151,7 @@ A line-by-line explanation of this example is available in a [tutorial](/develop `.streamlit/config.toml`: - - +```toml [server] enableStaticServing = true @@ -187,24 +178,21 @@ weight=700 [theme] font="tuffy" - - +``` Directory structure: - - +```none project_directory/ ├── .streamlit/ -│ └── config.toml +│ └── config.toml ├── static/ -│ ├── Tuffy-Bold.ttf -│ ├── Tuffy-BoldItalic.ttf -│ ├── Tuffy-Italic.ttf -│ └── Tuffy-Regular.ttf +│ ├── Tuffy-Bold.ttf +│ ├── Tuffy-BoldItalic.ttf +│ ├── Tuffy-Italic.ttf +│ └── Tuffy-Regular.ttf └── streamlit_app.py - - +``` ## Font fallbacks @@ -220,13 +208,11 @@ A line-by-line explanation of this example is available in a [tutorial](/develop `.streamlit/config.toml`: - - +```toml [theme] font="Nunito:https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000, sans-serif" codeFont="'Space Mono':https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap, monospace" - - +``` @@ -238,21 +224,17 @@ If any of your font family names contain spaces and you are declaring a fallback You can set the base font size for your app in pixels. You must specify the base font size as an integer. The following configuration is equivalent to the default base font size of 16 pixels: - - +```toml [theme] baseFontSize=16 - - +``` Additionally, you can set the font size for code blocks. The font size can be declared in pixels or rem. The following configuration is equivalent to the default code font size of 0.875rem. - - +```toml [theme] codeFontSize="0.875rem" - - +``` From d86ac61a36b9cb23ddb9f940d5b4999b6358cc8c Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Fri, 19 Dec 2025 11:01:43 -0800 Subject: [PATCH 5/5] Revert more content changes --- .../concepts/configuration/theming-fonts.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/content/develop/concepts/configuration/theming-fonts.md b/content/develop/concepts/configuration/theming-fonts.md index 2b7a1a655..edcd6ed7e 100644 --- a/content/develop/concepts/configuration/theming-fonts.md +++ b/content/develop/concepts/configuration/theming-fonts.md @@ -15,8 +15,7 @@ Streamlit comes with [Source Sans](https://fonts.adobe.com/fonts/source-sans), [ To use these default faults, you can set each of the following configuration options to `"sans-serif"` (Source Sans), `"serif"` (Source Serif), or `"monospace"` (Source Code) in `config.toml`: - - +```toml [theme] font = "sans-serif" headingFont = "sans-serif" @@ -25,8 +24,7 @@ codeFont = "monospace" font = "sans-serif" headingFont = "sans-serif" codeFont = "monospace" - - +``` You can set the base font weight and size in the `[theme]` table in `config.toml`. These can't be configured separately in the sidebar. @@ -128,11 +126,11 @@ Directory structure: ```none project_directory/ ├── .streamlit/ -│ └── config.toml +│ └── config.toml ├── static/ -│ ├── NotoSans-Italic-VariableFont_wdth,wght.ttf -│ ├── NotoSans-VariableFont_wdth,wght.ttf -│ └── NotoSansMono-VariableFont_wdth,wght.ttf +│ ├── NotoSans-Italic-VariableFont_wdth,wght.ttf +│ ├── NotoSans-VariableFont_wdth,wght.ttf +│ └── NotoSansMono-VariableFont_wdth,wght.ttf └── streamlit_app.py ```