Struggling to insert a code snippet into my React application, it's odd that no matter what I try, the format doesn't include line breaks. Below is the code snippet:
import React from 'react';
import './Hello.scss';
const Hello = () => {
return (
<>
<div>
Hello world!
</div>
<pre>
npx create-react-app my-app
cd my-app
npm start
</pre>
</>
)
}
export default Hello;pre {
font-size: 16px;
overflow: auto;
padding: 10px;
background-color: #f8f8f8;
border: 1px solid #ddd;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}Expected content inside the pre tag should display as:
npx create-react-app my-app
cd my-app
npm start
However, currently displaying as:
npx create-react-app my-app cd my-app npm start
Any suggestions on how to resolve this issue with pre?