Option to remove line number using show_line_numbers in gr.Code()

.changeset/giant-dryers-serve.md

@@ -0,0 +1,6 @@
+---
+"@gradio/code": minor
+"gradio": minor
+---
+
+feat:Option to remove line number using show_line_numbers in gr.Code()

demo/code/run.py

@@ -24,6 +24,7 @@ def code(language, code):
             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")
     btn = gr.Button("Run")

gradio/components/code.py

@@ -108,6 +108,7 @@ def __init__(
         render: bool = True,
         key: int | str | None = None,
         wrap_lines: bool = False,
+        show_line_numbers: bool = True,
     ):
         """
         Parameters:
@@ -137,6 +138,7 @@ def __init__(
         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,
@@ -180,7 +182,10 @@ def postprocess(self, value: str | None) -> None | str:
         return value.strip()
 
     def api_info(self) -> dict[str, Any]:
-        return {"type": "string"}
+        return {
+            "type": "string",
+            "show_line_numbers" : self.show_line_numbers,
+            }
 
     def example_payload(self) -> Any:
         return "print('Hello World')"

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 : boolean;
 
 	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,6 +4,7 @@
 		EditorView,
 		ViewUpdate,
 		keymap,
+		lineNumbers,
 		placeholder as placeholderExt
 	} from "@codemirror/view";
 	import { StateEffect, EditorState, type Extension } from "@codemirror/state";
@@ -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 : boolean = 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_number:boolean
 	): Extension[] {
 		const extensions: Extension[] = [
 			EditorView.editable.of(!readonly),
@@ -206,6 +210,12 @@
 		}
 
 		extensions.push(EditorView.updateListener.of(handle_change));
+
+		// Conditionally add line number
+		if(show_line_numbers){
+			extensions.push(lineNumbers())
+		}
+
 		if (wrap_lines) {
 			extensions.push(EditorView.lineWrapping);
 		}