@uiw/codemirror-extensions-classname NPM

Add className Extensions

Adding a class for a specific line for CodeMirror6.

Install

npm install @uiw/codemirror-extensions-classname --save

Usage

import CodeMirror from '@uiw/react-codemirror';
import { classname } from '@uiw/codemirror-extensions-classname';

const themeDemo = EditorView.baseTheme({
  '&dark .first-line': { backgroundColor: 'red' },
  '&light .first-line': { backgroundColor: 'red' },
  '&dark .line-color': { backgroundColor: 'blue' },
  '&light .line-color': { backgroundColor: 'blue' },
});

function App() {
  const classnameExt = classname({
    add: (lineNumber) => {
      if (lineNumber === 1) {
        return 'first-line';
      }
      if (lineNumber === 5) {
        return 'line-color';
      }
    },
  });
  return <CodeMirror value="" height="200px" extensions={[theme, classnameExt]} />;
}

export default App;

import CodeMirror from '@uiw/react-codemirror';
import { classname } from '@uiw/codemirror-extensions-classname';

function App() {
  const classnameExt = classname({
    add: (lineNumber) => {
      if (lineNumber === 1) {
        return 'first-line';
      }
      if (lineNumber === 5) {
        return 'line-color';
      }
    },
  });
  return <CodeMirror value="" height="200px" extensions={[classnameExt]} />;
}
export default App;

import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { classname } from '@uiw/codemirror-extensions-classname';

const classnameExt = classname({
  add: (lineNumber) => {
    if (lineNumber === 1) {
      return 'first-line';
    }
    if (lineNumber === 5) {
      return 'line-color';
    }
  },
});

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

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

API

import { Extension } from '@codemirror/state';
export declare type ClassnameOptions = {
  add?: (lineNumber: number) => string | undefined;
};
export declare function classname(options?: ClassnameOptions): Extension;