mirror of
https://github.com/elastic/kibana.git
synced 2025-06-28 11:05:39 -04:00
24 lines
No EOL
1.3 KiB
Text
24 lines
No EOL
1.3 KiB
Text
---
|
|
id: sharedUX/Components/CodeEditor
|
|
slug: /shared-ux/components/code-editor
|
|
title: Code Editor
|
|
description: A code editor to display code and edit code in Kibana.
|
|
tags: ['shared-ux', 'component']
|
|
date: 2022-12-05
|
|
---
|
|
|
|
## Description
|
|
|
|
This component is an abstraction of the [Monaco Code Editor](https://microsoft.github.io/monaco-editor/) (and the [React Monaco Editor component](https://github.com/react-monaco-editor/react-monaco-editor)). This component still allows access to the other Monaco features.
|
|
|
|
## Usage
|
|
|
|
This editor component allows easy access to:
|
|
* [Syntax highlighting (including custom language highlighting)](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages)
|
|
* [Suggestion/autocompletion widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example)
|
|
* Function signature widget
|
|
* [Hover widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-hover-provider-example)
|
|
|
|
The Monaco editor doesn't automatically resize the editor area on window or container resize so this component includes a [resize detector](https://github.com/maslianok/react-resize-detector) to cause the Monaco editor to re-layout and adjust its size when the window or container size changes
|
|
|
|
## API |