how to highlight some lines using version 4 ?

[abc444873863]

There is an attribute options in version 3, which can highlight lines.

So how to highlight some lines using version 4 when option attribute is gone. ?

[jaywcjlove]

@abc444873863 I don't know how to do it yet.

[jaywcjlove]

Example: Zebra Stripes

https://codesandbox.io/embed/react-codemirror-example-codemirror-6-zebra-stripes-qe67pr?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { Facet } from "@codemirror/state";
import { RangeSetBuilder } from "@codemirror/rangeset";
import { ViewPlugin, Decoration, EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";

const stripe = Decoration.line({
  attributes: { class: "cm-zebraStripe" }
});

const stepSize = Facet.define({
  combine: (values) => (values.length ? Math.min(...values) : 2)
});

function stripeDeco(view) {
  let step = view.state.facet(stepSize);
  let builder = new RangeSetBuilder();
  for (let { from, to } of view.visibleRanges) {
    for (let pos = from; pos <= to; ) {
      let line = view.state.doc.lineAt(pos);
      if (line.number % step === 0) builder.add(line.from, line.from, stripe);
      pos = line.to + 1;
    }
  }
  return builder.finish();
}

const showStripes = ViewPlugin.fromClass(
  class {
    constructor(view) {
      this.decorations = stripeDeco(view);
    }
    update(update) {
      if (update.docChanged || update.viewportChanged)
        this.decorations = stripeDeco(update.view);
    }
  },
  {
    decorations: (v) => v.decorations
  }
);

function zebraStripes(options = {}) {
  return [
    options.step == null ? [] : stepSize.of(options.step),
    showStripes,
    baseTheme
  ];
}

const baseTheme = EditorView.baseTheme({
  "&light .cm-zebraStripe": { backgroundColor: "#d4fafa" },
  "&dark .cm-zebraStripe": { backgroundColor: "#1a2727" }
});

let text = [];
for (let i = 1; i <= 100; i++) text.push(`console.log('hello world! ${i}');`);

export default function App() {
  return (
    <CodeMirror
      value={text.join("\n")}
      height="200px"
      extensions={[javascript({ jsx: true }), zebraStripes()]}
      onChange={(value, viewUpdate) => {
        console.log("value:", value);
      }}
    />
  );
}