📝 Editor support

[vjpr]

For tracking which editors support MDX.

• [x] JetBrains IntelliJ/WebStorm
  • https://plugins.jetbrains.com/plugin/14944-mdx
  • or using a VSCode plugin https://youtrack.jetbrains.com/issue/WEB-32599#focus=streamItem-27-3699900.0-0
• [x] Sublime - https://github.com/jonsuh/mdx-sublime
• [x] Atom - https://github.com/BCDH/language-mdxjs
• [x] VSCode - https://github.com/mdx-js/vscode-mdx
• [x] Prettier - https://github.com/prettier/prettier/issues/4960
• [x] Vim - https://github.com/jxnblk/vim-mdx-js
• [ ] Emacs

[Flaque]

Should editors add MDX highlighting for .md files? Or .jsx files? Or should there be a .mdx file?

[timneutkens]

.mdx seems the safest choice to me.

[Flaque]

I can take a crack at it for VSCode. Is there a .tmLanguage somewhere? If not I can make one.

[timneutkens]

@Flaque not atm, but I guess you can copy the .md one, and then copy import and export from javascript, and change the regex for inline html to match uppercase too, since it seems that is disregarded now.

[Flaque]

Sounds good, that’s my plan!

[pedronauck]

I agree with @timneutkens, .mdx can be the better choice and will be awesome, is really bad write mdx without editor support... I'll try to make for vscode, but unfortunelly i'm kind out of time now due to other project that use mdx too 😢

[timneutkens]

Added an item for prettier to the initial list, even though it's not an editor it falls under the same thing.

[wilomgfx]

Any updates on this ? I can work on vscode too @Flaque

[macklinu]

I would love Prettier support for MDX. Not sure what's involved, but glad to help if I can. I'm thinking there would be a prettier-plugin-mdx after looking at the Prettier plugins documentation. Any other thoughts on how to integrate MDX and Prettier?

[Flaque]

@wilomgfx take a shot at it, I got caught up in other things and likely won't finish it sorry 😅

[wilomgfx]

@Flaque did you have anything good already done that i can start from or im better off starting from scratch :)?

[Flaque]

Most of it was on a computer that bombed, which is kind of how I stopped working on it and then got distracted by other stuff. Sorry 😅

On Jun 23, 2018, 9:59 AM -0700, William Cantin notifications@github.com, wrote:

@Flaquehttps://github.com/Flaque did you have anything good already done that i can start from or im better off starting from scratch :)?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/mdx-js/mdx/issues/119#issuecomment-399693099, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AFqt8VJggIrZg-CRGRSfosxcRCIKptlGks5t_nP7gaJpZM4Ttiuu.

[flippidippi]

Anyone good at Vim plugins? 😄

[jxnblk]

I've literally never tried to write a Vim syntax before, but threw this together for my own use. If anyone wants to help out, that'd be great https://github.com/jxnblk/vim-mdx-js – cc @flipxfx

[silvenon]

I just published vscode-mdx!

[kentcdodds]

I've opened an issue for prettier support on the prettier repository: https://github.com/prettier/prettier/issues/4960

[sibelius]

this works great https://github.com/jxnblk/ok-mdx

would be cool to have an online version of it

[trevordmiller]

@jxnblk nice work on the vim plugin! Perhaps you could get it included in vim-polyglot as the mdx language pack?

---

UPDATE: requested in https://github.com/sheerun/vim-polyglot/issues/342.

[hsribei]

Spacemacs user here! My elisp is practically non-existing, but it'd be cool to add Emacs to the initial todo list in case someone comes along with the chops to work on it :)

[ChristopherBiscardi]

For emacs markdown-mode is probably the place to start, but it's already pretty OK from my perspective (despite not having "real support" for mdx). Biggest missing pieces are all the niceties that markdown-mode provides for inserting different elements. Indirect editing support for JSX blocks would be nice too (like the indirect editing support already available to code blocks) and seems mostly like a matter of propertizing jsx/import/export blocks.

[jonsuh]

I put something together for Sublime Text 3 support: https://github.com/jonsuh/mdx-sublime

I submitted a PR https://github.com/wbond/package_control_channel/pull/7312 to get it on Package Control.

It isn’t perfect, but it’s better than no syntax highlighting at all. I’ve never written language syntax before, so could use and would appreciate any help to improve it!

[silvenon]

@jonsuh great! ⭐️ It was my first time with VS Code as well, grammars are complicated and feel inherently hacky. 😅

[ryee-dev]

Any updates on intellij/webstorm support? :(

[bradringel]

I took a stab at this for atom, using @silvenon 's vscode repo as a base, it seems to be working okay but I can't get the end pattern to match properly. If you add a JSX, the content after that tag is closed also has the scope for JSX, instead of the markdown scope. Anyone know what's wrong here?

  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
  "name": "Markdown React",
  "patterns": [
    { "include": "#jsx" },
    { "include": "#markdown" }
  ],
  "repository": {
    "jsx": {
      "patterns": [
{
              "begin": "^(?=(import|export)\\b)",
              "end": "(\\s*$)",
              "contentName": "source.js.jsx",
              "patterns": [
                { "include": "source.js.jsx" }
              ]
           },
            {
              "begin": "^(?=<([a-z]|[A-Z]))",
              "end": "((\\w|/)>)",
              "contentName": "source.js.jsx",
              "patterns": [
                { "include": "source.js.jsx" }
              ]
            }
      ],
    },
    "markdown": {
      "contentName": "source.gfm",
      "patterns": [
        { "include": "source.gfm" }
      ]
    }
  },
  "scopeName": "source.markdown.jsx",
  "fileTypes": ["mdx"]
}

[trevordmiller]

Note that @jxnblk's vim-mdx-js plugin was added to vim-polyglot in https://github.com/sheerun/vim-polyglot/issues/342, so Vim can be checked off now :)

[trevordmiller]

Could these plugins be documented on https://mdxjs.com?

[johno]

Totally! Will happily accept a PR to add them in!

[trevordmiller]

@johno https://github.com/mdx-js/mdx/pull/436

[landsman]

I really want support of MDX in my Intellij Idea Ultimate please :)

[wilomgfx]

@landsman well that's the good thing about source. Do it 💪

[rg1220]

+1 for JetBrains IntelliJ/WebStorm support

[silvenon]

Please don't post any more "+1" comments, that is what emoji reactions are for. I understand that this is a highly requested plugin, but AFAIK nobody volunteered yet. As far as I see you'd have to know Java for this, which is not a common skill among people using MDX.

[ttasovac]

I took a stab at an MDX grammar for Atom: https://github.com/BCDH/language-mdxjs

[aloenobilis]

• 1 for emacs (+ markdown-mode js2)

[silvenon]

@ttasovac awesome! ❤️ I added it to the list ✅

[bitwhys]

Not sure if you view this as "full support" but the following is from the JetBrains issue thread and details how to get syntax highlighting in WebStorm. There's no autocomplete as far as I can tell, but correct me if I'm wrong, there isn't any either in vs-code. Either way this works as described.

https://youtrack.jetbrains.com/issue/WEB-32599#focus=streamItem-27-3699900.0-0

TL;DR

1. Download the source for vscode-mdx
2. In Webstorm: Settings > TextMateBundles
3. Click the plus button to add the source code (unzipped)
4. Apply changes
5. Enjoy

[silvenon]

@bitwhys cool! I updated the list.

[borisdiakur]

The TextMateBundles “work around” for JetBrains doesn’t work for me 😫. Any ideas anyone?

UPDATE Just received this comment from JetBrains support:

Support for TextMate grammatics written in JSON (as in this plugin) is only supported starting with version 2019.2.

[danon]

Yes, the vs-code-mdx-master trick works, but PhpStorm/IntelliJ will only display *.md preview window, it won't show preview window for .mdx files now.

[christopher-francisco]

@trevordmiller this is how it looks on my neovim, am I doing something wrong?

:set ft returns markdown.mdx

[dandv]

Is there an editor for MDX with live preview, similar to StackEdit? I couldn't find one among all the Electron apps.

[mtrojanowski]

There is an IntelliJ plugin for MDX since August 2020: https://plugins.jetbrains.com/plugin/14944-mdx/versions

[silvenon]

Thanks! Updated the list ✅

[wooorm]

going to close this issue, thanks y’all for your work! Please open new issues/prs if you want to add an editor integration!

[nyngwang]

@trevordmiller this is how it looks on my neovim, am I doing something wrong?

:set ft returns markdown.mdx

Wait, so nobody cares about this?

[NeuroNexul]

Is there any library for MDX language support for ACE editor or Codemirror?

[remcohaszing]

MDX editor support is provided using Volar. To add MDX language support for a web editor, means to add support for Volar.

• For Monaco editor, see @volar/monaco
• For CodeMirror, see https://github.com/volarjs/volar.js/issues/11
• For Ace there are no plans yet, but feel free to create an issue with Volar
• To add MDX support in your Volar enabled editor, use @mdx-js/language-service