Skip to content

Latest commit

 

History

History

console

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
README.md
README.md
 
 
dark.d.ts
dark.d.ts
 
 
light.d.ts
light.d.ts
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

Console Theme (dark/light)

Buy me a coffee npm version

codemirror-theme-console light codemirror-theme-console dark

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,
});

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.