> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Code

> Display and edit code with syntax highlighting

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

## Basic usage

```python theme={null}
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

<ParamField path="value" type="str | Callable | None" default="None">
  Default code to display
</ParamField>

<ParamField path="language" type="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
</ParamField>

<ParamField path="lines" type="int" default="5">
  Minimum number of visible lines
</ParamField>

<ParamField path="max_lines" type="int | None" default="None">
  Maximum number of visible lines. If None, fills container height
</ParamField>

<ParamField path="wrap_lines" type="bool" default="False">
  If True, wraps long lines to fit width
</ParamField>

<ParamField path="show_line_numbers" type="bool" default="True">
  Whether to display line numbers
</ParamField>

<ParamField path="autocomplete" type="bool" default="False">
  Whether to show autocomplete suggestions
</ParamField>

<ParamField path="interactive" type="bool | None" default="None">
  Whether code can be edited
</ParamField>

<ParamField path="buttons" type="list[Literal['copy', 'download'] | Button] | None" default="None">
  Buttons to show. By default, "copy" and "download" are shown
</ParamField>

## 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

```python theme={null}
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

```python theme={null}
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

```python theme={null}
import gradio as gr

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.