# Zebra Stripes Extensions
[](https://jaywcjlove.github.io/#/sponsor)
[](https://www.npmjs.com/package/@uiw/codemirror-extensions-zebra-stripes)
Styles alternating lines for CodeMirror6.
[](https://uiwjs.github.io/react-codemirror/#/extensions/zebra-stripes)
## 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 (
);
}
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](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.