InputTextArea如何格式化和高亮json

要格式化和高亮JSON，可以使用一个第三方库，如js-beautify和highlight.js。

首先，将JSON数据作为字符串传递给js-beautify的JSON.stringify方法，将其格式化为易于阅读的形式。然后将结果设置为Input.TextArea的值。

以下是一个示例代码：

import React, { useState } from 'react';
import beautify from 'js-beautify';
import hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css';

function JsonEditor() {
  const [json, setJson] = useState('');

  const handleInputChange = (e) => {
    const inputJson = e.target.value;
    setJson(beautify(JSON.stringify(JSON.parse(inputJson)), { indent_size: 2 }));
  };

  const highlightJson = (code) => {
    const highlighted = hljs.highlight('json', code).value;
    return { __html: highlighted };
  };

  return (
    <div>
      <textarea value={json} onChange={handleInputChange} />
      <pre>
        <code dangerouslySetInnerHTML={highlightJson(json)} />
      </pre>
    </div>
  );
}

export default JsonEditor;

在这个例子中，我们通过useState来管理Input.TextArea中的JSON字符串。当用户输入JSON时，我们使用JSON.parse将其解析为JavaScript对象，然后使用JSON.stringify将其转换回字符串。然后，我们使用js-beautify将其格式化为易于阅读的形式，并将结果存储在useState中。最后，我们使用highlight.js将高亮的JSON渲染到pre标签中。渲染时，我们使用dangerouslySetInnerHTML将高亮的HTML字符串直接插入到code标签中。

请注意，我们需要在highlight.js中导入并应用样式，以使高亮的JSON看起来更好。在这个例子中，我们使用了monokai-sublime样式。