n00b questions - misc styling

v5
1

Hi all,
I’m new to CodeMirror (really enjoying it!) and I’m using codemirror-react "@uiw/react-codemirror": "^4.19.9".

I’m having difficulty doing two things:

  1. Unhighlight the current line
  2. Setting the height and enabling vertical scroll.

For current line unhighlight, I’ve tried the SO suggestion of this in my css and doesn’t resolve:

.CodeMirror-activeline-background {
    background: transparent !important;
}
.CodeMirror-focused .CodeMirror-activeline-background {
    background: rgba(100, 100, 100, 0.1) !important;
}

and I’ve tried to style the parent div containing the CodeMirror component so it adjusts to the height and that doesn’t work.

This is what my current .js looks like:

import CodeMirror from '@uiw/react-codemirror';

...

<CodeMirror
  value={form.code_snippet}
  extensions={[python({ jsx: true })]}
  editable={false}
  theme={material}
/>

Thanks!

2

I’m not sure what ‘unhighlighting’ means here. Turning off the active line background? Just removing the addon should do that.

Setting the height is done by styling .CodeMirror or calling setSize on the editor instance.

3

Thanks @marijn.
I’m not sure what “Just removing the addon should do that.” means. Can you provide an example?

I tried calling the CodeMirror.setSize, is there another way to do it? The code I provided above is exactly how I’m using it (just importing CodeMirror and then <CodeMirror … >).
Thanks!