Feature: optionally display line numbers in code blocks

components/blocks/code.js

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
 import classNames from "classnames";
 import Prism from "prismjs";
 import "prismjs/plugins/line-numbers/prism-line-numbers";
+import "prismjs/plugins/line-numbers/prism-line-numbers.css";
 import "prismjs/plugins/line-highlight/prism-line-highlight";
 import "prismjs/plugins/line-highlight/prism-line-highlight.css";
 import "prismjs/plugins/toolbar/prism-toolbar";
@@ -15,14 +16,14 @@ import styles from "./code.module.css";
 // Initialize the cache for imported languages.
 const languageImports = new Map();
 
-const Code = ({ code, children, language, img, lines }) => {
+const Code = ({ code, children, language, img, lines, showLineNumbers }) => {
   // Create a ref for the code element.
   const codeRef = useRef(null);
 
   useEffect(() => {
     // Get the language from the className, if it exists.
     // Classname usually is `language-python`, `language-javascript`, `language-bash`, etc.
-    let importLanguage = children.props.className?.substring(9);
+    let importLanguage = children?.props?.className?.substring(9);
 
     // If no language, default to Phython
     if (importLanguage === undefined || importLanguage === "undefined") {
@@ -62,6 +63,9 @@ const Code = ({ code, children, language, img, lines }) => {
   let ConditionalRendering;
   let customCode = code !== undefined ? code : children;
   let languageClass = `language-${language}`;
+  const lineNumbersClass = classNames({
+    "line-numbers": children?.props?.showLineNumbers || showLineNumbers,
+  });
 
   if (children !== undefined && children.props !== undefined) {
     customCode = children.props.children;
@@ -72,7 +76,7 @@ const Code = ({ code, children, language, img, lines }) => {
     ConditionalRendering = (
       <section className={styles.Container}>
         <Image src={img} clean={true} />
-        <pre>
+        <pre className={lineNumbersClass}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
@@ -82,7 +86,7 @@ const Code = ({ code, children, language, img, lines }) => {
   } else if (lines) {
     ConditionalRendering = (
       <section className={classNames(styles.Container, styles.LineHighlight)}>
-        <pre data-line={lines}>
+        <pre className={lineNumbersClass} data-line={lines}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>
@@ -92,7 +96,7 @@ const Code = ({ code, children, language, img, lines }) => {
   } else {
     ConditionalRendering = (
       <section className={styles.Container}>
-        <pre>
+        <pre className={lineNumbersClass}>
           <code ref={codeRef} className={languageClass}>
             {customCode}
           </code>

components/blocks/code.module.css

@@ -37,7 +37,16 @@
   @apply opacity-100;
 }
 
-/* Code block adjustments */
+/* Line numbers */
+.Container span:global(.line-numbers-rows) {
+  @apply -top-[2px];
+}
+
+.Container span:global(.line-numbers-rows) > span {
+  @apply text-base leading-relaxed;
+}
+
+/* Code block styles */
 .Container pre code :global(.operator) {
   @apply text-yellow-50;
 }
@@ -75,7 +84,7 @@
   @apply inline;
 }
 
-/* Dark mode adjustments */
+/* Dark mode styles */
 :global(.dark) .Container pre code :global(.operator),
 :global(.dark) .Container pre code :global(.decorator) {
   @apply text-yellow-80;

content/kb/tutorials/chat.md

@@ -47,7 +47,7 @@ For an overview of the API, check out this video tutorial by Chanin Nantasenamat
 
 Here's an minimal example of how to use `st.chat_message` to display a welcome message:
 
-```python
+```python showLineNumbers
 import streamlit as st
 
 with st.chat_message("user"):
@@ -59,7 +59,7 @@ with st.chat_message("user"):
 
 Notice the message is displayed with a default avatar and styling since we passed in `"user"` as the author name. You can also pass in `"assistant"` as the author name to use a different default avatar and styling, or pass in a custom name and avatar. See the [API reference](/library/api-reference/chat/st.chat_message) for more details.
 
-```python
+```python showLineNumbers
 import streamlit as st
 import numpy as np
 

styles/text.scss

@@ -125,3 +125,8 @@ div.code-desc {
 tt.docutils.literal {
   @apply border border-gray-40 text-red-70 rounded-md px-1 mx-1 break-words;
 }
+
+/* Override border on line numbers in code blocks */
+.line-numbers .line-numbers-rows {
+  border-right: none !important;
+}