json editor

1

I’m using the lib “react-codemirror2” to make a JSON editor. But I can’t set the styles as I need. [This is what I want to get 333 — ImgBB

This is how I’m trying to implement, I’ve tried setting styles for various modifiers, but nothing helps, and the default styles don’t change:

export const CodeMirrorStyled = styled(CodeMirror)`
    & .CodeMirror {
        background: ${palette(EPaletteTheme.light_grey, 0)};
        font-family: "Roboto", monospace;
        font-size: 16px;
        height: 198px;
    }
    & .cm-variable {
        color: ${palette(EPaletteTheme.brand_blue, 0)};
    }

    /* stylelint-disable declaration-no-important */
    & div {
        &::-webkit-scrollbar {
            width: 4px !important;
        }

        &::-webkit-scrollbar-track {
            background: ${palette(EPaletteTheme.light_grey, 0)} !important;
        }

        &::-webkit-scrollbar-thumb {
            background-color: ${palette(EPaletteTheme.grey, 0)} !important;
            border-radius: 4px !important;
        }
    }
    /* stylelint-enable declaration-no-important */

    & .CodeMirror-gutters {
        background: ${palette(EPaletteTheme.light_grey, 0)};
    }
`;

<CodeMirrorStyled
                        value={httpBody}
                        options={{
                            theme: "default",
                            height: "auto",
                            viewportMargin: Infinity,
                            mode: {
                                name: "javascript",
                                json: true,
                                statementIndent: 2,
                            },
                            lineNumbers: true,
                            lineWrapping: true,
                            indentWithTabs: false,
                            tabSize: 2,
                        }}
                        onBeforeChange={(
                            editor: any,
                            data: any,
                            value: string
                        ) => {
                            onChangeCodeEditor(value);
                        }}
                  />
2

I suspect your styles are less specific than the ones inserted by the editor, and thus don’t take precedence. Look at the devtools inspector to figure out what styles are being applied to a given element.

1 Like
3

you’re right, your advice helped me apply the right styles. But I can’t change the color of the bracket {} in any way. I looked at the devtools inspector, the bracket has no className

4

The editor only generated marked spans for tokens that have a styling in the highlight styles it is given. See tagHighlighter and syntaxHighlighting.

1 Like
5

I can’t figure out how to make double brackets look like plain text. if I use double brackets {{exemple}}, the next line loses its structure