^{Using my app is also a way to support me:}

Zebra Stripes Extensions


Styles alternating lines for CodeMirror6.


Install

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

Usage

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

function App() {
return ;
}
export default App;
`

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

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

`js
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

`ts
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;
``

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.