Styling CodeMirror blocks

[MrDiamondDog]

I would like to pick a theme for my CodeMirror blocks, as specified in https://codemirror.net/examples/styling/#themes. There doesn't seem to be anything exposed for this, and no documentation exists. All I could find was an old thread that wasn't helpful at all. Thanks!

<MDXEditor ref={editorRef} markdown={page.content} plugins={[
    headingsPlugin(),
    listsPlugin(),
    quotePlugin(),
    thematicBreakPlugin(),
    tablePlugin(),
    codeBlockPlugin({ defaultCodeBlockLanguage: "js", }),
    codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS' }, autoLoadLanguageSupport: true }),
    markdownShortcutPlugin(),
    toolbarPlugin({
        toolbarClassName: 'md-toolbar',
        toolbarContents: () => (
            <>
                <UndoRedo />
                <BoldItalicUnderlineToggles />
                <ListsToggle />
                <InsertTable />
                <InsertThematicBreak />
                <InsertCodeBlock />
            </>
        )
    })
]} />

[cookesan]

Use the codeMirrorExtensions option. CodeMirror themes are extensions, so you can pass an EditorView.theme(...) extension through codeMirrorPlugin:

import { EditorView } from '@codemirror/view'

codeMirrorPlugin({
  codeBlockLanguages: { js: 'JavaScript', css: 'CSS' },
  autoLoadLanguageSupport: true,
  codeMirrorExtensions: [
    EditorView.theme({
      '&': {
        backgroundColor: '#111827',
        color: '#e5e7eb'
      },
      '.cm-gutters': {
        backgroundColor: '#0f172a',
        color: '#94a3b8'
      }
    })
  ]
})

One caveat: MDXEditor's current CodeMirrorEditor also adds its built-in light theme, so if you are overriding the same selectors you may need more specific selectors or !important on a few CodeMirror theme rules. The docs show this same pattern for .cm-gutters.