feature/code-block-description

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 = (
     <div className={classNames(styles.Header, "code-block-header")}>
       {showLanguage && (
         <span className={styles.Language}>{displayLanguage}</span>
       )}
+      {filename && <span className={styles.Filename}>{filename}</span>}
     </div>
   );
 

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;
 }

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
+<Code language="toml" filename=".streamlit/config.toml">
+
 [theme]
 font = "sans-serif"
 headingFont = "sans-serif"
@@ -24,7 +25,8 @@ codeFont = "monospace"
 font = "sans-serif"
 headingFont = "sans-serif"
 codeFont = "monospace"
-```
+
+</Code>
 
 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
+<Code language="toml" filename=".streamlit/config.toml">
+
 [theme]
 font = "serif"
 [theme.sidebar]
 font = "sans-serif"
-```
+
+</Code>
 
 ## 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
+<Code language="toml" filename=".streamlit/config.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"
-```
+
+</Code>
 
 <Important>
 
@@ -100,7 +106,8 @@ A line-by-line explanation of this example is available in a [tutorial](/develop
 
 `.streamlit/config.toml`:
 
-```toml
+<Code language="toml" filename=".streamlit/config.toml">
+
 [server]
 enableStaticServing = true
 
@@ -119,20 +126,23 @@ url="app/static/NotoSansMono-VariableFont_wdth,wght.ttf"
 [theme]
 font="noto-sans"
 codeFont="noto-mono"
-```
+
+</Code>
 
 Directory structure:
 
-```none
+<Code language="none" filename="Directory structure">
+
 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
-```
+
+</Code>
 
 ### 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
+<Code language="toml" filename=".streamlit/config.toml">
+
 [server]
 enableStaticServing = true
 
@@ -176,21 +187,24 @@ weight=700
 
 [theme]
 font="tuffy"
-```
+
+</Code>
 
 Directory structure:
 
-```none
+<Code language="none" filename="Directory structure">
+
 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
-```
+
+</Code>
 
 ## Font fallbacks
 
@@ -206,11 +220,13 @@ A line-by-line explanation of this example is available in a [tutorial](/develop
 
 `.streamlit/config.toml`:
 
-```toml
+<Code language="toml" filename=".streamlit/config.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"
-```
+
+</Code>
 
 <Tip>
 
@@ -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
+<Code language="toml" filename=".streamlit/config.toml">
+
 [theme]
 baseFontSize=16
-```
+
+</Code>
 
 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
+<Code language="toml" filename=".streamlit/config.toml">
+
 [theme]
 codeFontSize="0.875rem"
-```
+
+</Code>
 
 <Note>