Browse documentation

MDX

Syntax highlighting for .mdx files: Markdown, frontmatter, imports, JSX and fenced code blocks. No compilation or preview.

.mdx files open with syntax highlighting and a Markdown file icon. mIDE highlights the source; it does not build, run or preview MDX.

Syntax highlighting

The MDX TextMate grammar covers Markdown markup, YAML and TOML frontmatter, ESM imports and exports, JSX components and JavaScript expressions. The grammar and tokenizer load only when the first MDX file is opened, so projects without MDX pay nothing for the support.

In HTML, Astro, JSX, TSX and MDX, local image paths in src still get gutter thumbnails and hover previews, as described inFeatures.

Fenced code blocks

These fenced languages are highlighted inside MDX:

html, css, javascript,typescript, jsx, tsx,json and markdown.

Other fenced languages remain plain text. They are not loaded from an extension or downloaded at runtime.

Theming

MDX token scopes use mIDE's existing theme colors, including themes you import. There are no separate MDX colors to configure, and a theme switch applies to MDX files immediately.

What MDX does not do

  • No MDX code is compiled, executed, previewed or completed.
  • No error checking, type checking or diagnostics come from the MDX content.
  • Format Document support is unchanged; MDX formatting is not included in the highlighting support. Use the terminal and your project's own tools for that.
  • Imports, components and expressions are highlighted as source text, not resolved.

To preview the result, run the project's own development server in the terminal and open the address it prints in your browser. Go Live serves a static folder; it does not build MDX.