Question: Is there any way to control the line number and gutters's showing or hiding?

[lililo111]

There is a scene: I need to hide the editor's line number and gutters, but I don't know how to do with it. If anyone could help will be thankful!

[jaywcjlove]

@lililo111 Another official gutter example, you can refer to it.

Gutter: https://codemirror.net/6/examples/gutter/ Example: Zebra Stripes: https://codemirror.net/6/examples/zebra/

[tkp-richard]

@jaywcjlove hi, can you please provide an example for react-codemirror? by default, react-codemirror has gutter enabled whereas in the examples you've given are about adding gutters by enabling extensions

[jaywcjlove]

https://github.com/uiwjs/react-codemirror/blob/29d584077e1f9dc7dad3ebbc4acad9b3d86440ef/core/src/index.tsx#L28-L32

@tkp-richard

[tkp-richard]

i see. i thought basic setup would mean the barebones instead of the other way around. thanks for the help!

[jaywcjlove]

@tkp-richard I am extending the API

export interface BasicSetupOptions {
  lineNumbers?: boolean;
  highlightActiveLineGutter?: boolean;
  highlightSpecialChars?: boolean;
  history?: boolean;
  foldGutter?: boolean;
  drawSelection?: boolean;
  dropCursor?: boolean;
  allowMultipleSelections?: boolean;
  indentOnInput?: boolean;
  syntaxHighlighting?: boolean;
  bracketMatching?: boolean;
  closeBrackets?: boolean;
  autocompletion?: boolean;
  rectangularSelection?: boolean;
  crosshairCursor?: boolean;
  highlightActiveLine?: boolean;
  highlightSelectionMatches?: boolean;
}

[tkp-richard]

that's awesome!

[jaywcjlove]

@lililo111 @tkp-richard Example: https://codesandbox.io/embed/react-codemirror-example-codemirror-6-forked-hctv1g?fontsize=14&hidenavigation=1&theme=dark

<CodeMirror
  value="console.log('hello world!');"
  height="200px"
  theme="dark"
  basicSetup={{
+    lineNumbers: false
  }}
  extensions={[javascript({ jsx: true })]}
  onChange={(value, viewUpdate) => {
    console.log("value:", value);
  }}
/>