Code

The Code component provides a code editor with syntax highlighting for various programming languages.

Basic usage

import gradio as gr

def format_code(code):
    return code.strip()

gr.Interface(
    fn=format_code,
    inputs=gr.Code(language="python"),
    outputs=gr.Code(language="python")
).launch()

Constructor

str | Callable | None

default:"None"

Default code to display

str | None

default:"None"

Programming language for syntax highlighting. Options include:

“python”, “javascript”, “typescript”, “java”, “c”, “cpp”
“html”, “css”, “json”, “yaml”, “markdown”
“sql”, “r”, “shell”, “dockerfile”

See gr.Code.languages for full list

int

default:"5"

Minimum number of visible lines

int | None

default:"None"

Maximum number of visible lines. If None, fills container height

bool

default:"False"

If True, wraps long lines to fit width

bool

default:"True"

Whether to display line numbers

bool

default:"False"

Whether to show autocomplete suggestions

bool | None

default:"None"

Whether code can be edited

list[Literal['copy', 'download'] | Button] | None

default:"None"

Buttons to show. By default, “copy” and “download” are shown

Events

change - Triggered when code changes
input - Triggered on keystroke
focus - Triggered when editor gains focus
blur - Triggered when editor loses focus

Examples

Python editor

import gradio as gr

initial_code = '''
def greet(name):
    return f"Hello, {name}!"

greet("World")
'''

gr.Code(
    value=initial_code,
    language="python",
    lines=10
)

JSON viewer

import gradio as gr

json_data = '''
{
  "name": "Alice",
  "age": 30,
  "skills": ["Python", "JavaScript"]
}
'''

gr.Code(
    value=json_data,
    language="json",
    interactive=False
)

SQL with autocomplete

import gradio as gr

gr.Code(
    language="sql",
    autocomplete=True,
    placeholder="SELECT * FROM users WHERE ..."
)

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Basic usage

Constructor

Events

Examples

Python editor

JSON viewer

SQL with autocomplete

​Basic usage

​Constructor

​Events

​Examples

​Python editor

​JSON viewer

​SQL with autocomplete

Basic usage

Constructor

Events

Examples

Python editor

JSON viewer

SQL with autocomplete