如何在 react 的 textarea 中语法高亮

问：

我需要将语法突出显示应用于 react 中 textarea 中以自定义语言编写的代码。 因此，当用户键入时，它会突出显示文本区域内的代码，而不是创建单独的 div 或其他东西。

我尝试将 react-simple-code-editor 与 prism 和 react-syntax-highlighter 一起使用，但这些效果不佳......要么我无法根据自己的喜好设置样式，要么他们正在创建一个单独的 div，这毫无用处，因为为什么我需要一个单独的突出显示代码和我的原始代码。 棱镜确实有效，但可以弄清楚将其嵌入到文本区域中。 请帮忙。

这是编辑器组件。

import '../styles/Editor.css'
import PropTypes from 'prop-types'
import React, { useState, useEffect } from 'react';

export default function Editor({ disabled = false, code }) {
    // const [liveCode, setLiveCode] = useState('');
    const [lineNumbers, setLineNumbers] = useState([]);
    const codeAreaRef = React.createRef();

    const updateLineNumbers = (text) => {
        const lines = text.split('\n');
        setLineNumbers(new Array(lines.length).fill().map((_, i) => i + 1));
    };

    useEffect(() => {
        if (disabled && code) {
            updateLineNumbers(code);
        }
    }, [])

    useEffect(() => {
        if (codeAreaRef.current) {
            codeAreaRef.current.addEventListener('scroll', () => {
                const codeArea = codeAreaRef.current;
                const lineNumbersContainer = codeAreaRef.current.previousSibling;
                lineNumbersContainer.scrollTop = codeArea.scrollTop;
            });
        }
    }, [codeAreaRef]);

    const handleCodeChange = (event) => {
        const newText = event.target.value;
        // setLiveCode(newText);
        updateLineNumbers(newText);
    };

    return (
        <div className="editor-container">
            <div className="line-numbers">
                {lineNumbers.map((line, index) => (
                    <div key={index} className="line-number">
                        {line}
                    </div>
                ))}
            </div>
            <textarea id="codeArea" disabled={disabled} value={code} onChange={handleCodeChange} ref={codeAreaRef}></textarea>
        </div>
    )
}

Editor.propTypes = {
    disabled: PropTypes.bool,
    code: PropTypes.string
}