uiwjs / react-codemirror

CodeMirror 6 component for React. @codemirror https://uiwjs.github.io/react-codemirror/
https://uiwjs.github.io/react-codemirror/
MIT License
1.52k stars 126 forks source link

Change active line in Code Mirror #497

Open ttnghia179 opened 1 year ago

ttnghia179 commented 1 year ago

Hi, I want to change the active line programmatically. How should I start?

jaywcjlove commented 1 year ago

@ttnghia179

https://github.com/uiwjs/react-codemirror/blob/d48bb957629a31c7e06efe9c448b4061a53dc3c8/themes/theme/src/index.tsx#L97-L101

import { EditorView } from '@codemirror/view';

const activeLineTheme = EditorView.baseTheme(
  {
     "& .cm-activeLine": { backgroundColor: "#cceeff44" },
  }
);

    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      extensions={[activeLineTheme]}
      onChange={onChange}
    />