0

I am trying to create a coding text editor that performs syntax highlighting on the text entered by the user. Currently I have one text area that takes input and a SyntaxHighlighter component that applies syntax highlighting for the output. I want to combine both and have the textarea to be behind the output with transparent background but the cursor also becomes transparent which is not what I want. Is this possible with CSS? If so how would the styling look like?

import React, {useEffect,useState} from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

const Editor = (props) => {
    const [content, setContent] = useState(props.content);

    return (
      <div className="code-edit-container">
        <textarea
          className="code-input"
          onChange={evt => setContent(evt.target.value)}
        />
        <div className="code-output">
        <SyntaxHighlighter language="javascript">
            {content}
         </SyntaxHighlighter>
        </div>
        </div>

    );
  };
vishnkr
  • 67
  • 1
  • 9
  • Unsure of what exactly the problem is. Can you reproduce what you have with the CSS code as well in JsFiddle or Codepen or the like? – Lowkase Jun 08 '20 at 17:10
  • @Lowkase here is a sandbox with the code : https://codesandbox.io/s/goofy-sutherland-o64d7. You can see that the highlighted output code and input code are both visible and are not aligned. – vishnkr Jun 09 '20 at 06:24
  • I see what you're trying to do now. The only thing I can suggest is to take a look at other best practices out there including existing libraries: https://stackoverflow.com/questions/1619167/textarea-that-can-do-syntax-highlighting-on-the-fly – Lowkase Jun 09 '20 at 14:00

0 Answers0