Synopsis: In ReactJS, I have a string of HTML code that I've formatted using js-beautify and styled using 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>
  );
}

On the UI, this is what I get:

Here's the Code Sandbox to see it all in action and for you to edit.

Problem: What I would like to have happen is two things:

1. Wrap the line at the width of the div, so that the horizontal scroll does not show up.
2. When the line wraps to the next line, the overflowing text should not start at the beginning of the line, but right below where the original line started.

To try wrapping the text (Problem 1), I tried adding the following as suggested in this post, but it seems to only work when the code is wrapped in a pre tag, which I do not have here...

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