Simple no-frills code editor with syntax highlighting.
Several browser based code editors such as Ace, CodeMirror, Monaco etc. provide the ability to embed a full-featured code editor in your web page. However, if you just need a simple editor with syntax highlighting without any of the extra features, they can be overkill as they don't usually have a small bundle size footprint. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.
- Modular syntax highlighting with third party library
- Indent line or selected text by pressing tab key, with customizable indentation
- Automatic indent on new lines
- Undo whole words instead of letter by letter
- Accessible, use
Ctrl+Mto toggle capturing tab key
npm install react-simple-code-editor
yarn add react-simple-code-editor
You need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with
string): Current value of the editor i.e. the code to display.
string => mixed): Callback which is called when the value of the editor changes. You'll need to update the value prop when this is called.
string => string): Callback which will receive text to highlight. You'll need to return HTML with syntax highlighting using a library such as
number): The number of characters to insert when pressing tab key. For example, for 4 space indentation,
boolean): Whether to use spaces for indentation. Default:
boolean): Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using
Ctrl+Mmanually when this is
number): Optional padding for code. Default:
How it works
It works by overlaying a syntax highlighted
<pre> block over a
<textarea>. When you type, select, copy text etc., you interact with the underlying
<textarea>, so the experience feels native. This is a very simple approach compared to other editors which re-implement the behaviour.
The syntax highlighting can be done by any third party library as long as it returns HTML and is fully controllable by the user.
<textarea> doesn't support inserting tab characters for indentation, so we re-implement it by listening to
keydown events and programmatically updating the text. One caveat with programmatically updating the text is that we lose the undo stack, so we need to maintain our own undo stack. As a result, we can also implement improved undo behaviour such as undoing whole words similar to editors like VSCode.
Due to the way it works, it has certain limitations:
- The syntax highlighted code cannot have different font family, font weight, font style, line height etc. for its content. Since the editor works by aligning the highlighted code over a
<textarea>, changing anything that affects the layout can misalign it.
- The custom undo stack is incompatible with undo/redo items browser's context menu. However, other full featured editors don't support browser's undo/redo menu items either.
- The editor is not optimized for performance and large documents can affect the typing speed.
While developing, you can run the example app to test your changes:
Make sure your code passes Flow and ESLint. Run the following to verify:
yarn flow yarn lint
To fix formatting errors, run the following:
yarn lint -- --fix
Subscribe to React.js Examples
Get the latest posts delivered right to your inbox