I’m trying to create a monaco editor which only highlights curly braces. It would highlight any text in curly braces green and any curly braces with no end curly braces or any sort of syntax error red (doesn’t need to be complicated).

How can I do this with the monaco editor?

This is my current implementation, I’m using Nextjs and pnpm.

import React, { useEffect } from 'react'
import Editor, { useMonaco } from '@monaco-editor/react'

// Adjusted config to only highlight curly braces
export const languageDef = {
  defaultToken: '',
  brackets: [['{', '}', 'delimiter.curly']],
  tokenizer: {
    root: [
      [/{/, 'delimiter.curly'], // Token for opening curly brace
      [/}/, 'delimiter.curly'], // Token for closing curly brace
    ],
  },
}

const configuration = {
  base: 'vs',
  inherit: true,
  rules: [
    { token: 'delimiter.curly', foreground: 'FF0000', fontStyle: 'bold' }, // Styling for curly braces
  ],
}

export default function TractaEditor({
  value,
  onChange,
}: {
  value: string
  onChange: (value: string | undefined) => void
}) {
  const monaco = useMonaco()

  useEffect(() => {
    if (!monaco) return
    // Register a new language
    monaco.languages.register({ id: 'tracta' })
    // Register a tokens provider for the language
    monaco.languages.setMonarchTokensProvider('tracta', languageDef)
    // Set the editing configuration for the language
    monaco.editor.defineTheme('tracta', configuration)
  }, [monaco])

  return (
    <Editor
      defaultLanguage="tracta"
      theme="tracta"
      value={value}
      onChange={onChange}
      line={20}
      options={{
        lineNumbers: 'off',
        minimap: { enabled: false },
        readOnly: false,
        scrollbar: { vertical: 'hidden', horizontal: 'hidden' },
        wordWrap: 'on',
        wrappingIndent: 'same',
        fontFamily: 'Geist',
        fontSize: 14,
        lineHeight: 20,
        lineDecorationsWidth: 0,
        glyphMargin: false,
        renderLineHighlight: 'none',
        overviewRulerBorder: false,
        folding: false,
        rulers: [],
      }}
      className="flex max-h-[120px] min-h-[80px] w-full rounded-base border-2 border-black bg-white p-2 text-sm font-base shadow-base ring-offset-white placeholder:text-black/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
    />
  )
}

I’ve tried chatgpt and other online resources however I can’t seem to create my own language