textarea preview like stackoverflow have

Question

I have a textarea , I created a preview div which only displays the text, but I want the text to have background color of grey when the sentence is between `` to display codes.

<textarea onChange={handleChange}></textarea>

I have a div which contains pre and code block.

<div>
 <pre>{preview}</pre>
 <code>{code}</code>
</div>

my handleChange function is:

const handleChange = (e) =>{
    e.preventDefault()
    setDescription(e.target.value)
    setPreview(e.target.value);

    if (e.key === '`'){
      setCode(e.target.value)
    }

}

Here, Code and preview are defined using useState

const [preview, setPreview] = useState("");
const [code, setCode] = useState("");

Is there any way I can accomplish it?

Answer 1

You should probably consider using some library for this that handles all edge cases.

But for learning purposes you can refer to the snippet below, I've split the text by ` and wrapped all the odd index items in code .

When you split the string "type `code` here" , you get this array ["type", "code", "here"] and if you observe the contents wrapped inside ` will always be at an odd index. So, I've mapped over the array and wrapped all odd index items within code . Try spitting more such strings and you'll get more clarity on this.

 function App() { const [content, setContent] = React.useState("Type `code` here"); return ( <div> <textarea value={content} onChange={({ target }) => setContent(target.value)} ></textarea> <p> {content .split("`") .map((c, i) => (i & 1 ? <code key={i}>{c}</code> : c))} </p> </div> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> );

 code { background: #eee; padding: 0.25rem; border-radius: 0.15rem; } textarea { width: 60ch; height: 5rem; }

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>