diff --git a/components/blocks/code.js b/components/blocks/code.js
index b02f5ef2d..e8efad6f7 100644
--- a/components/blocks/code.js
+++ b/components/blocks/code.js
@@ -60,6 +60,8 @@ const Code = ({
img,
lines,
hideCopyButton = false,
+ filename,
+ filenameOnly = true,
}) => {
// Create a ref for the code element.
const codeRef = useRef(null);
@@ -124,13 +126,15 @@ 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 = (
{showLanguage && (
{displayLanguage}
)}
+ {filename && {filename}}
);
diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css
index ee9119bce..6f00a5e47 100644
--- a/components/blocks/code.module.css
+++ b/components/blocks/code.module.css
@@ -16,6 +16,10 @@
@apply uppercase tracking-wider pr-4;
}
+.Filename {
+ @apply font-mono text-sm leading-6 pr-4;
+}
+
.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..7938d4999 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"
-```
+
+