📝 Editor support #119

vjpr · 2018-05-01T04:02:26Z

For tracking which editors support MDX.

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
Sublime - https://github.com/jonsuh/mdx-sublime
Atom - https://github.com/BCDH/language-mdxjs
VSCode - https://github.com/mdx-js/vscode-mdx
Prettier - MDX Support prettier/prettier#4960
Vim - https://github.com/jxnblk/vim-mdx-js
Emacs

Flaque · 2018-05-06T23:58:53Z

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

timneutkens · 2018-05-07T00:13:18Z

.mdx seems the safest choice to me.

Flaque · 2018-05-07T01:28:10Z

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

timneutkens · 2018-05-07T08:10:49Z

@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 · 2018-05-07T16:10:06Z

Sounds good, that’s my plan!

pedronauck · 2018-05-10T17:52:38Z

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 · 2018-05-10T18:06:12Z

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

wilomgfx · 2018-06-12T18:48:41Z

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

macklinu · 2018-06-23T04:37:09Z

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 · 2018-06-23T16:49:24Z

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

wilomgfx · 2018-06-23T16:59:38Z

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

Flaque · 2018-06-23T17:12:59Z

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 <[email protected]>, wrote: @Flaque<https://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 GitHub<#119 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AFqt8VJggIrZg-CRGRSfosxcRCIKptlGks5t_nP7gaJpZM4Ttiuu>.

flippidippi · 2018-06-30T04:21:23Z

Anyone good at Vim plugins? 😄

jxnblk · 2018-07-14T22:27:26Z

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 · 2018-07-15T01:29:39Z

I just published vscode-mdx!

kentcdodds · 2018-08-09T04:18:37Z

I've opened an issue for prettier support on the prettier repository: prettier/prettier#4960

sibelius · 2018-08-13T16:38:01Z

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

would be cool to have an online version of it

trevordmiller · 2018-08-26T07:27:46Z

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

UPDATE: requested in sheerun/vim-polyglot#342.

hsribei · 2018-08-28T14:57:52Z

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 · 2018-08-29T17:07:11Z

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 · 2018-10-03T21:54:52Z

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

I submitted a PR wbond/package_control_channel#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 · 2018-10-04T07:22:20Z

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

ryee-dev · 2018-10-10T16:53:10Z

Any updates on intellij/webstorm support? :(

bradringel · 2019-02-04T20:17:21Z

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 · 2019-03-05T17:59:14Z

@johno #436

Based on the completed plugins from #119

landsman · 2019-05-13T23:08:15Z

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

wilomgfx · 2019-05-13T23:18:43Z

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

rg1220 · 2019-06-18T15:48:31Z

+1 for JetBrains IntelliJ/WebStorm support

silvenon · 2019-06-18T17:03:55Z

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 · 2019-08-24T13:22:00Z

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

aloenobilis · 2019-09-17T05:31:37Z

1 for emacs (+ markdown-mode js2)

silvenon · 2019-10-15T21:03:11Z

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

bitwhys · 2019-10-29T23:12:44Z

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

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

silvenon · 2019-11-09T21:11:15Z

@bitwhys cool! I updated the list.

borisdiakur · 2019-12-19T09:36:44Z

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 · 2020-02-24T23:59:33Z

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 · 2020-03-11T02:02:43Z

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

:set ft returns markdown.mdx

dandv · 2020-05-20T19:09:43Z

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

mtrojanowski · 2020-10-06T13:30:18Z

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

silvenon · 2020-10-06T14:55:05Z

Thanks! Updated the list ✅

wooorm · 2021-10-19T19:36:55Z

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 · 2021-12-14T04:59:45Z

@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?

There's no actual language mode for mdx files yet: mdx-js/mdx#119

NeuroNexul · 2024-03-18T23:35:44Z

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

remcohaszing · 2024-03-19T09:44:22Z

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 Integration with CodeMirror volarjs/volar.js#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

See: mdx-js/mdx#119

johno added the 💬 type/discussion This is a request for comments label May 1, 2018

TimPetricola mentioned this issue Jun 13, 2018

VSCode syntax highlighter doczjs/docz#23

Closed

trevordmiller mentioned this issue Sep 3, 2018

Add language pack for MDX sheerun/vim-polyglot#342

Closed

hsribei mentioned this issue Sep 7, 2018

Feature request: syntax highlighting for MDX files (Markdown + JSX) syl20bnr/spacemacs#11288

Closed

layershifter mentioned this issue Oct 8, 2018

chore(docs): allow to use .mdx format in docs microsoft/fluent-ui-react#330

Closed

ryee-dev mentioned this issue Oct 19, 2018

intellij/webstorm syntax highlighting support #293

Closed

johno pushed a commit that referenced this issue Mar 5, 2019

Add documentation page for editor plugins (#436)

638b0ed

Based on the completed plugins from #119

johno pinned this issue Apr 17, 2019

johno changed the title ~~Editor support~~ 📝 Editor support Apr 17, 2019

johno unpinned this issue Jul 11, 2019

wooorm closed this as completed Oct 19, 2021

jeffkreeftmeijer added a commit to jeffkreeftmeijer/.emacs.d that referenced this issue Mar 16, 2023

Use markdown-mode for mdx files

93efbcd

There's no actual language mode for mdx files yet: mdx-js/mdx#119

jeffkreeftmeijer added a commit to jeffkreeftmeijer/linguist.el that referenced this issue Mar 22, 2023

Use markdown-mode for mdx files

87bd2cd

There's no actual language mode for mdx files yet: mdx-js/mdx#119

jeffkreeftmeijer added a commit to jeffkreeftmeijer/linguist.el that referenced this issue Mar 25, 2023

Use markdown-mode for mdx files

ac40b7b

There's no actual language mode for mdx files yet: mdx-js/mdx#119

jeffkreeftmeijer added a commit to jeffkreeftmeijer/.emacs.d that referenced this issue May 16, 2023

Use markdown-mode for mdx files

954748a

There's no actual language mode for mdx files yet: mdx-js/mdx#119

RangHo added a commit to RangHo/dotfiles that referenced this issue Jul 22, 2024

feat(emacs): add MDX support

ff4ee3b

See: mdx-js/mdx#119

📝 Editor support #119

📝 Editor support #119

Comments

vjpr commented May 1, 2018 • edited by silvenon Loading

Flaque commented May 6, 2018

timneutkens commented May 7, 2018

Flaque commented May 7, 2018

timneutkens commented May 7, 2018

Flaque commented May 7, 2018

pedronauck commented May 10, 2018 • edited Loading

timneutkens commented May 10, 2018

wilomgfx commented Jun 12, 2018

macklinu commented Jun 23, 2018

Flaque commented Jun 23, 2018

wilomgfx commented Jun 23, 2018

Flaque commented Jun 23, 2018 via email

flippidippi commented Jun 30, 2018

jxnblk commented Jul 14, 2018

silvenon commented Jul 15, 2018

kentcdodds commented Aug 9, 2018

sibelius commented Aug 13, 2018

trevordmiller commented Aug 26, 2018 • edited Loading

hsribei commented Aug 28, 2018

ChristopherBiscardi commented Aug 29, 2018

jonsuh commented Oct 3, 2018 • edited Loading

silvenon commented Oct 4, 2018 • edited Loading

ryee-dev commented Oct 10, 2018

bradringel commented Feb 4, 2019 • edited Loading

trevordmiller commented Mar 5, 2019

landsman commented May 13, 2019

wilomgfx commented May 13, 2019

rg1220 commented Jun 18, 2019

silvenon commented Jun 18, 2019

ttasovac commented Aug 24, 2019

aloenobilis commented Sep 17, 2019

silvenon commented Oct 15, 2019 • edited Loading

bitwhys commented Oct 29, 2019 • edited Loading

silvenon commented Nov 9, 2019

borisdiakur commented Dec 19, 2019 • edited Loading

danon commented Feb 24, 2020

christopher-francisco commented Mar 11, 2020 • edited Loading

dandv commented May 20, 2020

mtrojanowski commented Oct 6, 2020

silvenon commented Oct 6, 2020

wooorm commented Oct 19, 2021

nyngwang commented Dec 14, 2021

NeuroNexul commented Mar 18, 2024

remcohaszing commented Mar 19, 2024

vjpr commented May 1, 2018 •

edited by silvenon

Loading

pedronauck commented May 10, 2018 •

edited

Loading

trevordmiller commented Aug 26, 2018 •

edited

Loading

jonsuh commented Oct 3, 2018 •

edited

Loading

silvenon commented Oct 4, 2018 •

edited

Loading

bradringel commented Feb 4, 2019 •

edited

Loading

silvenon commented Oct 15, 2019 •

edited

Loading

bitwhys commented Oct 29, 2019 •

edited

Loading

borisdiakur commented Dec 19, 2019 •

edited

Loading

christopher-francisco commented Mar 11, 2020 •

edited

Loading