MDXとは

JSXにMarkdownを組み込んだものがMDXです。JSXはJavaScriptの拡張構文です。

VSCodeでもmdxファイルに色を付ける

GatsbyJSを使っているときに、mdxのファイルにも色を付けたいと思ったのでMarkdown All in Oneというプラグインを拡張することにしました。

GatsbyJSで使っているmdxファイルの中身は、普通のMarkdownなのでMarkdown All in Oneを拡張さえすれば表示できます。

Markdown All in Oneを拡張

Markdown All in Oneをインストールしていない方は、VSCodeのExtensions Marketから入れましょう。

Markdown All in Oneの設定画面を開き、Extension Settingsを開いてください。

次にEdit in Settings.jsonを開いてください。

こちらのjsonを追記すると、mdxファイルのテキストに色が付きます。

"files.associations": {
    "*.mdx": "markdown"
}