gray color on text highlight

[Altamimi-Dev]

how can i remove the light gray highlight on text?

[jaywcjlove]

@Altamimi-Dev If you provide a reproducible example I can help you take a look at

https://github.com/uiwjs/react-textarea-code-editor/blob/cd69726f61b4672c6963c1b424570825f438e126/core/src/style/index.less#L69

[Altamimi-Dev]

@jaywcjlove i just used the example provided in the readme file

import LanguageSelector from "@renderer/components/language-selector";
import { Button } from "@renderer/components/ui/button";
import { useJsonToXml } from "@renderer/utils/jsonToxml";
import CodeEditor from "@uiw/react-textarea-code-editor";
import { useState } from "react";

function CodeConvertor() {
  const [fromCode, setCode] = useState(`function add(a, b) {\n  return a + b;\n}`);
  const [toCode, setToCode] = useState("");

  const languages = [
    "javascript",
    "typescript",
    "json",
    "html",
    "css",
    "markdown",
    "sql",
    "xml",
    "yaml",
  ];
  const jsonToxml = useJsonToXml("");

  return (
    <div>
      <div className="mb-10">
        <span className="text-3xl font-bold">Convertor</span>
      </div>
      <div className="grid grid-cols-2 gap-2">
        <div className="grid">
          <label htmlFor="">From</label>
          <LanguageSelector languages={languages} className="mb-5" />
          <CodeEditor
            className="rounded-md "
            value={fromCode}
            language="json"
            placeholder="Please enter JS code."
            onChange={(evn) => setCode(evn.target.value)}
            padding={15}
            data-color-mode="dark"
            style={{
              fontSize: 12,
              fontFamily:
                "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
            }}
          />
        </div>
        <div className="grid">
          <label htmlFor="">To</label>
          <LanguageSelector languages={languages} className="mb-5" />
          <CodeEditor
            // prefixCls="react-textarea-code-editor"
            className="rounded-md "
            value={toCode}
            language="xml"
            placeholder="Please enter JS code."
            // onChange={(evn) => setCode(evn.target.value)}
            padding={15}
            data-color-mode="dark"
            style={{
              fontSize: 12,
              fontFamily:
                "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
            }}
          />{" "}
        </div>
      </div>
      <Button>
        <div
          onClick={() => {
            const result = useJsonToXml(fromCode);
            setToCode(result);
          }}
        >
          Convert
        </div>
      </Button>{" "}
    </div>
  );
}
export default CodeConvertor;

[jaywcjlove]

@Altamimi-Dev https://codesandbox.io/s/https-github-com-uiwjs-react-textarea-code-editor-issues-165-mcqgwq?file=/src/App.js

You can provide reproducible examples based on the above examples.

[Altamimi-Dev]

tailwind was overriding code text color fixed now thank you :)