added a show_line_numbers to toggle line numbers in gr.Code() (#10643)

* added a show_line_numbers to toggle line numbers in gr.Code()

* added a show_line_numbers to toggle line numbers in gr.Code()

* add changeset

* notebook

* test_code.py updated to include show_line_numbers

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/bitter-walls-mix.md

@@ -0,0 +1,6 @@
+---
+"@gradio/code": minor
+"gradio": minor
+---
+
+feat:added a show_line_numbers to toggle line numbers in gr.Code()

demo/code/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: code"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/code/file.css"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from time import sleep\n", "\n", "css_file = os.path.join(os.path.abspath(''), \"file.css\")\n", "\n", "def set_lang(language):\n", "    print(language)\n", "    return gr.Code(language=language)\n", "\n", "def set_lang_from_path():\n", "    sleep(1)\n", "    return gr.Code(open(css_file).read(), language=\"css\")\n", "\n", "def code(language, code):\n", "    return gr.Code(code, language=language)\n", "\n", "io = gr.Interface(lambda x: x, \"code\", \"code\")\n", "\n", "with gr.Blocks() as demo:\n", "    lang = gr.Dropdown(value=\"python\", choices=gr.Code.languages)\n", "    with gr.Row():\n", "        code_in = gr.Code(\n", "            language=\"python\",\n", "            label=\"Input\",\n", "            value='def all_odd_elements(sequence):\\n    \"\"\"Returns every odd element of the sequence.\"\"\"',\n", "        )\n", "        code_out = gr.Code(label=\"Output\")\n", "    btn = gr.Button(\"Run\")\n", "    btn_two = gr.Button(\"Load File\")\n", "\n", "    lang.change(set_lang, inputs=lang, outputs=code_in)\n", "    btn.click(code, inputs=[lang, code_in], outputs=code_out)\n", "    btn_two.click(set_lang_from_path, inputs=None, outputs=code_out)\n", "    io.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: code"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/code/file.css"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "from time import sleep\n", "\n", "css_file = os.path.join(os.path.abspath(''), \"file.css\")\n", "\n", "def set_lang(language):\n", "    print(language)\n", "    return gr.Code(language=language)\n", "\n", "def set_lang_from_path():\n", "    sleep(1)\n", "    return gr.Code(open(css_file).read(), language=\"css\")\n", "\n", "def code(language, code):\n", "    return gr.Code(code, language=language)\n", "\n", "io = gr.Interface(lambda x: x, \"code\", \"code\")\n", "\n", "with gr.Blocks() as demo:\n", "    lang = gr.Dropdown(value=\"python\", choices=gr.Code.languages)\n", "    with gr.Row():\n", "        code_in = gr.Code(\n", "            language=\"python\",\n", "            label=\"Input\",\n", "            value='def all_odd_elements(sequence):\\n    \"\"\"Returns every odd element of the sequence.\"\"\"',\n", "            show_line_numbers = False\n", "        )\n", "        code_out = gr.Code(label=\"Output\", show_line_numbers = True)\n", "    btn = gr.Button(\"Run\")\n", "    btn_two = gr.Button(\"Load File\")\n", "\n", "    lang.change(set_lang, inputs=lang, outputs=code_in)\n", "    btn.click(code, inputs=[lang, code_in], outputs=code_out)\n", "    btn_two.click(set_lang_from_path, inputs=None, outputs=code_out)\n", "    io.render()\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/code/run.py

@@ -24,8 +24,9 @@ with gr.Blocks() as demo:
             language="python",
             label="Input",
             value='def all_odd_elements(sequence):\n    """Returns every odd element of the sequence."""',
+            show_line_numbers = False
         )
-        code_out = gr.Code(label="Output")
+        code_out = gr.Code(label="Output", show_line_numbers = True)
     btn = gr.Button("Run")
     btn_two = gr.Button("Load File")
 

gradio/components/code.py

@@ -108,6 +108,7 @@ class Code(Component):
         render: bool = True,
         key: int | str | None = None,
         wrap_lines: bool = False,
+        show_line_numbers: bool = True,
     ):
         """
         Parameters:
@@ -129,6 +130,7 @@ class Code(Component):
             lines: Minimum number of visible lines to show in the code editor.
             max_lines: Maximum number of visible lines to show in the code editor. Defaults to None and will fill the height of the container.
             wrap_lines: If True, will wrap lines to the width of the container when overflow occurs. Defaults to False.
+            show_line_numbers:  If True, displays line numbers, and if False, hides line numbers.
         """
         if language not in Code.languages:
             raise ValueError(f"Language {language} not supported.")
@@ -137,6 +139,7 @@ class Code(Component):
         self.lines = lines
         self.max_lines = max(lines, max_lines) if max_lines is not None else None
         self.wrap_lines = wrap_lines
+        self.show_line_numbers = show_line_numbers
         super().__init__(
             label=label,
             every=every,

js/code/Index.svelte

@@ -39,6 +39,7 @@
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
 	export let wrap_lines = false;
+	export let show_line_numbers = true;
 
 	export let interactive: boolean;
 
@@ -91,6 +92,7 @@
 			{max_lines}
 			{dark_mode}
 			{wrap_lines}
+			{show_line_numbers}
 			readonly={!interactive}
 			on:blur={() => gradio.dispatch("blur")}
 			on:focus={() => gradio.dispatch("focus")}

js/code/shared/Code.svelte

@@ -4,7 +4,8 @@
 		EditorView,
 		ViewUpdate,
 		keymap,
-		placeholder as placeholderExt
+		placeholder as placeholderExt,
+		lineNumbers
 	} from "@codemirror/view";
 	import { StateEffect, EditorState, type Extension } from "@codemirror/state";
 	import { indentWithTab } from "@codemirror/commands";
@@ -26,6 +27,7 @@
 	export let readonly = false;
 	export let placeholder: string | HTMLElement | null | undefined = undefined;
 	export let wrap_lines = false;
+	export let show_line_numbers = true;
 
 	const dispatch = createEventDispatcher<{
 		change: string;
@@ -131,7 +133,8 @@
 				use_tab,
 				placeholder,
 				readonly,
-				lang_extension
+				lang_extension,
+				show_line_numbers
 			),
 			FontTheme,
 			...get_theme(),
@@ -184,7 +187,8 @@
 		use_tab: boolean,
 		placeholder: string | HTMLElement | null | undefined,
 		readonly: boolean,
-		lang: Extension | null | undefined
+		lang: Extension | null | undefined,
+		show_line_numbers: boolean
 	): Extension[] {
 		const extensions: Extension[] = [
 			EditorView.editable.of(!readonly),
@@ -205,10 +209,15 @@
 			extensions.push(lang);
 		}
 
+		if (show_line_numbers) {
+			extensions.push(lineNumbers());
+		}
+
 		extensions.push(EditorView.updateListener.of(handle_change));
 		if (wrap_lines) {
 			extensions.push(EditorView.lineWrapping);
 		}
+
 		return extensions;
 	}
 

js/code/shared/extensions.ts

@@ -25,7 +25,6 @@ import {
 import { lintKeymap } from "@codemirror/lint";
 
 export const basicSetup: Extension = /*@__PURE__*/ ((): Extension[] => [
-	lineNumbers(),
 	highlightSpecialChars(),
 	history(),
 	foldGutter(),

test/components/test_code.py

@@ -47,6 +47,7 @@ class TestCode:
             "_selectable": False,
             "wrap_lines": False,
             "key": None,
+            "show_line_numbers": True,
         }
 
     def test_process_example(self):

test/requirements.txt

@@ -355,4 +355,4 @@ wcwidth==0.2.13
 websockets==14.2
     # via gradio-client
 zipp==3.21.0
-    # via importlib-metadata
+    # via importlib-metadata