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

Add className Extensions


Adding a class for a specific line for CodeMirror6.


Install

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

Usage

`jsx
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 ;
}

export default App;
`

`jsx
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 ;
}
export default App;
`

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

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

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.