Is there a way to prettify my shell script text on React

Question

I am working on a React project and I am making a UI where it will show the shell script to the users and they can choose options from the dropdown.

Example of what user see on the UI:

!#/bin/bash

###Dropdown1
echo {option1}

###Dropdown2
echo {option2}

my code below

// in MainPage.js

const Script = (option1, option2) => {
  return `
!#/bin/bash

###Dropdown1
echo {option1}

\n###Dropdown2
echo {option2}
`;
};

function MainPage() {
  return (
    <div className="left">
      <pre> {Script(option1, option2)}; </pre>
    </div>
  );
}

I would like to prettify it as the dropdown options may be very long in text, so it will look cluttered.

Any ideas how I can do this on React? I was looking at prettier-plugin-sh but that seems to be prettify the code on the IDE, instead of my UI. I am new to React so I am not sure how to approach this. Thanks!