CodeEditor

import TabItem from '@theme/TabItem'; import Tabs from '@theme/Tabs'; import {ClassMembers, ClassSummary, CodeExample, Image} from '@site/src/components/crocodocs';

<ClassSummary name={frontMatter.class_name} image={frontMatter.example_images + '/image_for_docs.png'} imageCaption="Basic CodeEditor" imageWidth="60%"/>

Usage

Add flet-code-editor to your project dependencies:

<Tabs groupId="uv--pip"> <TabItem value="uv" label="uv"> ```bash uv add flet-code-editor ``` </TabItem> <TabItem value="pip" label="pip"> ```bash pip install flet-code-editor # (1)! ```

1. After this, you will have to manually add this package to your requirements.txt or pyproject.toml. </TabItem>

</Tabs> ## Examples

Basic example

<CodeExample path={frontMatter.examples + '/example_1/main.py'} language="python" />

<Image src={frontMatter.example_images + '/example_1.png'} alt="code-editor-example-1" width="60%" />

Selection handling

<CodeExample path={frontMatter.examples + '/example_2/main.py'} language="python" />

<Image src={frontMatter.example_images + '/example_2.png'} alt="code-editor-example-2" width="65%" />

Folding and initial selection

<CodeExample path={frontMatter.examples + '/example_3/main.py'} language="python" />

<Image src={frontMatter.example_images + '/example_3.png'} alt="code-editor-example-3" width="65%" />

<ClassMembers name={frontMatter.class_name} />