Sinopsis : en ReactJS, tengo una cadena de código HTML que he formateado usando js-beautify y estilizado usando react-syntax-highlighter :

 import SyntaxHighlighter from "react-syntax-highlighter"; import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/hljs"; let beautify = require("js-beautify").html; export default function App() { const beautifyHTML = () => { const code = "<div><h1>Small Piece of Text.</h1><div><h2>AReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyLongPieceOfText.</h2></div><h3>AnotherReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyReallyLongPieceOfText.</h3></div>"; const beautifiedHTML = beautify(code, { indent_size: 2, brace_style: "expand" }); return beautifiedHTML; }; return ( <div className="App"> <SyntaxHighlighter language="html" style={a11yDark}> {beautifyHTML()} </SyntaxHighlighter> </div> ); }

En la interfaz de usuario, esto es lo que obtengo:

Aquí está Code Sandbox para verlo todo en acción y para que lo edite .

Problema : Lo que me gustaría que sucediera son dos cosas:

1. Envuelva la línea en el ancho del div, para que no aparezca el desplazamiento horizontal.
2. Cuando la línea pasa a la siguiente, el texto desbordado no debe comenzar al principio de la línea, sino justo debajo de donde comenzó la línea original.

Para intentar envolver el texto (Problema 1), intenté agregar lo siguiente como se sugiere en esta publicación , pero parece que solo funciona cuando el código está envuelto en una etiqueta pre , que no tengo aquí...

 .App code { white-space: pre-wrap; word-wrap: break-word; }