From c68c1a84b4d1f7a3736197ee17ea2e33f482c719 Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Sun, 14 Dec 2025 09:26:12 -0800 Subject: [PATCH 1/3] 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 fd770ac5909c6797237740a17e06213e94cf2881 Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Sun, 14 Dec 2025 09:55:52 -0800 Subject: [PATCH 2/3] 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 b712a86f87f179a6c5aa3e65d5ccdcb924b9f2de Mon Sep 17 00:00:00 2001 From: Debbie Matthews Date: Sun, 14 Dec 2025 10:12:47 -0800 Subject: [PATCH 3/3] 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/