@uiw/codemirror-extensions-zebra-stripes NPM

Zebra Stripes Extensions

Styles alternating lines for CodeMirror6.

Install

npm install @uiw/codemirror-extensions-zebra-stripes --save

Usage

import CodeMirror from '@uiw/react-codemirror';
import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';

function App() {
  return <CodeMirror value="" height="200px" extensions={[zebraStripes({ step: 2 })]} />;
}
export default App;

import CodeMirror from '@uiw/react-codemirror';
import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';

function App() {
  return (
    <CodeMirror
      value=""
      height="200px"
      extensions={[
        zebraStripes({
          lineNumber: [1, [3, 6], 10],
          lightColor: '#aca2ff33',
          darkColor: '#aca2ff40',
        }),
      ]}
    />
  );
}
export default App;

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

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

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

API

import { Extension } from '@codemirror/state';
export declare type ZebraStripesOptions = {
  step?: number | null;
  lightColor?: string;
  darkColor?: string;
  /**
   * @example `[1,[2,6], 10]`
   */
  lineNumber?: (number | number[])[] | null;
  /** @default `cm-zebra-stripe` */
  className?: string;
};
export declare function zebraStripes(options?: ZebraStripesOptions): Extension;