Codemirror 将 JSON 全部显示在单行上答案

【问题标题】：Codemirror shows JSON all on single lineCodemirror 将 JSON 全部显示在单行上
【发布时间】：2019-02-23 21:44:55
【问题描述】：

使用 react-codemirror2 和 react-jsonschema-form 开始了一个新项目，也非常相似https://mozilla-services.github.io/react-jsonschema-form/

但是，当我的 codemirror 编辑器呈现 JSON 时，我将所有节目加载到一行中。我已经通过https://mozilla-services.github.io/react-jsonschema-form/的源代码，找不到任何与我所拥有的不同的东西。

我的源代码：

    import React, { useEffect, useState } from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";

import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import "codemirror/mode/javascript/javascript.js";

// components

const CodeEditorContainer = ({ code, onChange }) => {
  const [codeEditorState, setCodeEditorState] = useState();

  useEffect(() => {
    setCodeEditorState(code);
  }, [code]);

  const cmOptions = {
    theme: "default",
    height: "auto",
    viewportMargin: Infinity,
    mode: {
      name: "javascript",
      json: true,
      statementIndent: 2
    },
    lineNumbers: true,
    lineWrapping: true,
    indentWithTabs: false,
    tabSize: 2
  };

  return (
    <div className="panel panel-default">
      <div className="panel-heading">Schema Editor</div>
      <CodeMirror
        value={codeEditorState}
        options={cmOptions}
        autoCursor={false}
        onChange={(editor, data, value) => onChange(value)}
      />
    </div>
  );
};

export default CodeEditorContainer;

编辑：问题在于我将 JSON 解析为字符串而不是

JSON.stringify(json)

我用过

JSON.stringify(json, null, 2)

【问题讨论】：

您好，您知道为什么CodeMirror 以单色显示所有JSON 元素吗？它没有正确突出所有内容吗？就像您的情况一样，即使在我的情况下，application/lg+json 也显示在 red font 中，而括号则显示在 black font 中，除了没有正确突出显示任何内容。知道如何解决这个问题吗？
嗨，我很久以前就停止了这个项目，但是这可能会对你有所帮助stackoverflow.com/a/33495405/2274900

标签： reactjs codemirror react-codemirror

【解决方案1】：

问题是我将 JSON 解析为字符串而不是

JSON.stringify(json)

我用过

JSON.stringify(json, null, 2)

【讨论】：