How to make React SyntaxHighlighter display multiple lines

Question

I'm trying to pass a string of markup into the highlighter but its only displaying it on a single line. I want it to look exactly like the markup I'm passing in.

How I'm passing the string into the child component

 <Showcase 
   class="w-full p-4 text-center m-auto space-x-2" 
   component={
          <>
            <Button variant="primary" text="Disabled Button" disabled />
            <Button variant="secondary" text="Disabled Button" disabled />
          </>
   } 
   syntaxBlock='
          <Button variant="primary" text="Disabled Button" disabled />
          <Button variant="secondary" text="Disabled Button" disabled />
   '
   title="Disabled" 
/>

The code block that renders the highlighter

<SyntaxHighlighter wrapLines={true} language="javascript" style={a11yDark} showLineNumbers>
  {props.syntaxBlock}
</SyntaxHighlighter>

Answer 1

In TypeScript, you can create a multi-line string using the backtick ` symbol.

You can either create the multiline string outside of your component and pass it in:

var code = `List<DateTime> times = AvailabilityService().getTimesOnDay(
    response: model.availabilityResponse!,
    dentist: model.singleDentist!,
    localDate: TimeService().getDateWithoutTime(date),
    useBuffer: true,
  );`;

return (
  <div className="w-1/2 bg-blue-700 h-64">
    <CodeBlock codestring={code}/>
  </div>
);

Or you can pass the value to the component directly. If you do this, you need to use backticks and braces like so:

return (
    <div className="w-1/2 bg-blue-700 h-64">
      <CodeBlock codestring={`List<DateTime> times = AvailabilityService().getTimesOnDay(
        response: model.availabilityResponse!,
        dentist: model.singleDentist!,
        localDate: TimeService().getDateWithoutTime(date),
        useBuffer: true,
      );`} />
    </div>
  );