@uiw/codemirror-theme-duotone v4.22.0
Duotone Theme
Install
npm install @uiw/codemirror-theme-duotone --save
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
const state = EditorState.create({
doc: 'my source code',
extensions: [duotoneDark, javascript({ jsx: true })],
});
Using in React:
import { duotoneLight, duotoneLightInit, duotoneDark, duotoneDarkInit } from '@uiw/codemirror-theme-duotone';
<CodeMirror theme={duotoneLight} />
<CodeMirror
theme={duotoneLightInit({
settings: {
caret: '#c6c6c6',
fontFamily: 'monospace',
}
})}
/>
API
import { CreateThemeOptions } from '@uiw/codemirror-themes';
export declare const defaultSettingsDuotoneLight: CreateThemeOptions['settings'];
export declare const duotoneLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
export declare const duotoneLight: import('@codemirror/state').Extension;
export declare const defaultSettingsDuotoneDark: CreateThemeOptions['settings'];
export declare const duotoneDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
export declare const duotoneDark: import('@codemirror/state').Extension;
Usage
import CodeMirror from '@uiw/react-codemirror';
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
import { javascript } from '@codemirror/lang-javascript';
function App() {
return (
<CodeMirror
value="console.log('hello world!');"
height="200px"
theme={duotoneLight}
extensions={[javascript({ jsx: true })]}
onChange={(value, viewUpdate) => {
console.log('value:', value);
}}
/>
);
}
export default App;
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import { duotoneLight, duotoneDark } from '@uiw/codemirror-theme-duotone';
const state = EditorState.create({
doc: 'my source code',
extensions: [duotoneDark, javascript({ jsx: true })],
});
const view = new EditorView({
parent: document.querySelector('#editor'),
state,
});
Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.
by Bram de Haan, adapted from DuoTone themes by Simurai (http://simurai.com/projects/2016/01/01/duotone-themes)
9 days ago
2 months ago
2 months ago
3 months ago
3 months ago
9 months ago
9 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
5 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago