如何在 const 字符串中包含换行符/换行符？

Question

I have a string declared as a const in React JS. And I am trying to display it but the appropriate newlines/line breaks aren't not working properly. I tried putting \\n within the string itself but it doesn't work and I'm hoping to get some help.

The String Variable itself

const CODE_EXAMPLE = `
const CHECKBOX = {
LABEL: {
    content: SECONDARY_GLOBAL_TEXT,
    disabled: {
      content: SECONDARY_GLOBAL_DISABLED_TEXT
    }
  },
  ERROR_MESSAGE: {
    content: SECONDARY_GLOBAL_ERROR_TEXT
  },
  checked: {
    icon: PRIMARY_GLOBAL_BASE,
    background: TRANSPARENT,
    hover: {
      icon: PRIMARY_GLOBAL_BASE,
      background: SECONDARY_GLOBAL_HOVER,
    },
    disabled: {
      icon: SECONDARY_GLOBAL_DISABLED_CONTENT
    }
  },
}
`;

How I am rendering it

<div className="gray-background">
  {CODE_EXAMPLE} 
</div>

This is what it currently looks like:

This is what it's supposed to look like:

Answer 1

This is an HTML feature, it collapses any extra spaces/new lines by default. You can use tag pre to see the text as is.

Answer 2

You may be able to accomplish this through css via white-space: pre

This post goes over some options.

Answer 3

\\n will not work in JSX. In this case, I would suggest splitting the lines used with special characters.