How to format output text to show as code in react

Question

This might me a newbie question but can someone please tell me know to make React show input text as code?

I am writing a document and I want to add a JSON format in it. However, instead of this:

{
   "policies":{
      "ExtensionSettings":{
         "*":{
            "blocked_install_message":"Custom error message.",
            "install_sources":[
               "about:addons",
               "https://addons.mozilla.org/"
            ],
            "installation_mode":"allowed",
            "allowed_types":[
               "extension"
            ]
         },
         "{d634138d-c276-4fc8-924b-40a0ea21d284}":{
            "installation_mode":"force_installed",
            "install_url":"https://addons.cdn.mozilla.net/user-media/addons/950528/1password_password_manager-1.23.1-fx.xpi?filehash=sha256%3A47e9e98f1072d93d595002dc8c221e5cca17e091b3431563a8e3e2be575c5cc1"
         }
      }
   }

The outcome is this:

{ "policies": { "ExtensionSettings": { "*": { "blocked_install_message": "Custom error message.", "install_sources": ["about:addons","https://addons.mozilla.org/"], "installation_mode": "allowed", "allowed_types": ["extension"] }, "{d634138d-c276-4fc8-924b-40a0ea21d284}": { "installation_mode": "force_installed", "install_url": "https://addons.cdn.mozilla.net/user-media/addons/950528/1password_password_manager-1.23.1-fx.xpi?filehash=sha256%3A47e9e98f1072d93d595002dc8c221e5cca17e091b3431563a8e3e2be575c5cc1" } } }

I am using React Semantic UI and wrap the text in <Container> component.

Answer 1

It's pretty hard in a semantic container to format text to looks like json but you can use a react package like react-json-pretty or you can make a JSON.stringify(json,undefined,2) and pass it in a semantic TextArea that you add into your container and "play" with css to make looks better.
Here an example with both solution:

import React from "react";
import JSONPretty from "react-json-pretty";
import JSONPrettyMon from "react-json-pretty/dist/monikai";
import { Container, TextArea } from "semantic-ui-react";

const ContainerExampleContainer = () => {
  return (
    <>
      <Container>
        <h2>WITH STYLE</h2>
        <JSONPretty id="json-pretty" data={json} theme={JSONPrettyMon} />
        <h2>WITHOUT STYLE</h2>
        <JSONPretty id="json-pretty" data={json} />
      </Container>
      <Container>
        <h2>In a TextArea </h2>
        <TextArea
          style={{
            border: "none",
            cursor: "text",
            width: "100%"
          }}
          value={JSON.stringify(json, undefined, 2)}
          placeholder="json here"
          rows={25}
          disabled
        />
      </Container>
    </>
  );
};
const json = {
  policies: {
    ExtensionSettings: {
      "*": {
        blocked_install_message: "Custom error message.",
        install_sources: ["about:addons", "https://addons.mozilla.org/"],
        installation_mode: "allowed",
        allowed_types: ["extension"]
      },
      "{d634138d-c276-4fc8-924b-40a0ea21d284}": {
        installation_mode: "force_installed",
        install_url:
          "https://addons.cdn.mozilla.net/user-media/addons/950528/1password_password_manager-1.23.1-fx.xpi?filehash=sha256%3A47e9e98f1072d93d595002dc8c221e5cca17e091b3431563a8e3e2be575c5cc1"
      }
    }
  }
};

export default ContainerExampleContainer;

***UPDATE***

Instead of passing a textArea to your Container you can add `as="textarea"` in Container props like this:

 <Container
        as="textarea"
        style={{
          border: "none",
          cursor: "text",
          width: "100%"
        }}
        rows={25}
        value={JSON.stringify(json, undefined, 2)}
        disabled
      ></Container>