Add custom embedded syntax into .mdx

README.md

Add Custom Syntax support in code blocks in .mdx

Replace LANGUAGE with the name of the language everywhere

1. Add the LANGUAGE-mdx-injection.json to syntaxes of your extension.
2. Add new language ID into "contributes.languages" section of package.json (see below)
3. Add new grammar definition to "contributes.grammars" section of package.json (see below)

{
  "contributes": {
      "languages": [
        {
          "id": "LANGUAGE-mdx-injection"
        }
      ],
  }
}

{
    "grammars": [
      {
        "language": "LANGUAGE-mdx-injection",
        "scopeName": "mdx.LANGUAGE.codeblock",
        "path": "./syntaxes/LANGUAGE-mdx-injection.json",
        "injectTo": [
          "source.mdx"
        ],
        "embeddedLanguages": {
          "meta.embedded.block.LANGUAGE": "LANGUAGE"
        }
      }
    ]
}

LANGUAGE-mdx-injection.json

{
    "fileTypes": [],
    "injectionSelector": "L:source.mdx",
    "patterns": [
        {
            "include": "#LANGUAGE-code-block"
        }
    ],
    "repository": {
        "LANGUAGE-code-block": {
            "begin": "(^|\\G)(\\s*)(\\`{3,}|~{3,})\\s*(?i:(LANGUAGE)",
            "name": "markup.code.other.mdx",
            "end": "(^|\\G)(\\2|\\s{0,3})(\\3)\\s*$",
            "beginCaptures": {
                "3": {
                    "name": "string.other.begin.code.fenced.mdx"
                },
                "4": {
                    "name": "entity.name.function.mdx"
                }
            },
            "endCaptures": {
                "3": {
                    "name": "string.other.end.code.fenced.mdx"
                }
            },
            "patterns": [
                {
                    "begin": "(^|\\G)(\\s*)(.*)",
                    "while": "(^|\\G)(?!\\s*([`~]{3,})\\s*$)",
                    "contentName": "meta.embedded.block.LANGUAGE",
                    "patterns": [
                        {
                            "include": "source.LANGUAGE"
                        }
                    ]
                }
            ]
        }
    },
    "scopeName": "mdx.LANGUAGE.codeblock"
}