@uiw/codemirror-theme-console NPM

Console Theme (dark/light)

Motivation

One of the usages for react-codemirror is a logger component, but there is no theme with the required styles for achieving the desired feature. This theme is intended to be used when you want to have plain text in a console or terminal viewer.

Install

npm install @uiw/codemirror-theme-console --save

import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import { consoleLight, consoleDark } from '@uiw/codemirror-theme-console';

const state = EditorState.create({
  doc: 'my source code',
  extensions: [consoleDark],
});

Using in React:

import { consoleLight, consoleLightInit, consoleDark, consoleDarkInit } from '@uiw/codemirror-theme-console';
// Or
import { consoleDark, consoleDarkInit } from '@uiw/codemirror-theme-console/dark';
import { consoleLight, consoleLightInit } from '@uiw/codemirror-theme-console/light';

<CodeMirror theme={consoleLight} />
<CodeMirror
  theme={consoleLightInit({
    settings: {
      caret: '#c6c6c6',
      fontFamily: 'monospace',
    }
  })}
/>

API

import { CreateThemeOptions } from '@uiw/codemirror-themes';
export declare const defaultSettingsConsoleLight: CreateThemeOptions['settings'];
export declare const consoleLightInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
export declare const consoleLight: import('@codemirror/state').Extension;
export declare const defaultSettingsConsoleDark: CreateThemeOptions['settings'];
export declare const consoleDarkInit: (options?: Partial<CreateThemeOptions>) => import('@codemirror/state').Extension;
export declare const consoleDark: import('@codemirror/state').Extension;

Usage

import CodeMirror from '@uiw/react-codemirror';
import { consoleLight, consoleDark } from '@uiw/codemirror-theme-console';
import { javascript } from '@codemirror/lang-javascript';

function App() {
  return (
    <CodeMirror
      value="INFO:waitress:Serving on http://0.0.0.0:5000"
      height="200px"
      theme={consoleLight}
      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 { consoleLight, consoleDark } from '@uiw/codemirror-theme-console';

const state = EditorState.create({
  doc: 'my source code',
  extensions: [consoleDark],
});

const view = new EditorView({
  parent: document.querySelector('#editor'),
  state,
});