^{Using my app is also a way to support me:}

Red Theme

Red theme for cm6, generated from vscode themes.

Install

1npm install @uiw/codemirror-theme-red --save

1import { EditorState } from '@codemirror/state';
2import { javascript } from '@codemirror/lang-javascript';
3import { red } from '@uiw/codemirror-theme-red';
4
5const state = EditorState.create({
6  doc: 'my source code',
7  extensions: [red, javascript({ jsx: true })],
8});

Using in React:

1import { red, redInit } from '@uiw/codemirror-theme-red';
2
3<CodeMirror theme={red} />
4<CodeMirror
5  theme={redInit({
6    settings: {
7      caret: '#c6c6c6',
8      fontFamily: 'monospace',
9    }
10  })}
11/>

API

1import { CreateThemeOptions } from '@uiw/codemirror-themes';
2export declare const defaultSettingsQuietlight: CreateThemeOptions['settings'];
3export declare const redInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
4export declare const red: import('@codemirror/state').Extension;

Usage

1import CodeMirror from '@uiw/react-codemirror';
2import { red } from '@uiw/codemirror-theme-red';
3import { javascript } from '@codemirror/lang-javascript';
4
5function App() {
6  return (
7    <CodeMirror
8      value="console.log('hello world!');"
9      height="200px"
10      theme={red}
11      extensions={[javascript({ jsx: true })]}
12      onChange={(value, viewUpdate) => {
13        console.log('value:', value);
14      }}
15    />
16  );
17}
18export default App;

1import { EditorView } from '@codemirror/view';
2import { EditorState } from '@codemirror/state';
3import { javascript } from '@codemirror/lang-javascript';
4import { red } from '@uiw/codemirror-theme-red';
5
6const state = EditorState.create({
7  doc: 'my source code',
8  extensions: [red, javascript({ jsx: true })],
9});
10
11const view = new EditorView({
12  parent: document.querySelector('#editor'),
13  state,
14});

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.