Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃摑 Editor support #119

Open
6 of 7 tasks
vjpr opened this issue May 1, 2018 · 43 comments
Open
6 of 7 tasks

馃摑 Editor support #119

vjpr opened this issue May 1, 2018 · 43 comments

Comments

@vjpr
Copy link

@vjpr vjpr commented May 1, 2018

For tracking which editors support MDX.

@Flaque
Copy link

@Flaque Flaque commented May 6, 2018

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

@timneutkens
Copy link
Member

@timneutkens timneutkens commented May 7, 2018

.mdx seems the safest choice to me.

@Flaque
Copy link

@Flaque Flaque commented May 7, 2018

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

@timneutkens
Copy link
Member

@timneutkens timneutkens commented May 7, 2018

@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
Copy link

@Flaque Flaque commented May 7, 2018

Sounds good, that鈥檚 my plan!

@pedronauck
Copy link

@pedronauck pedronauck commented May 10, 2018

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
Copy link
Member

@timneutkens timneutkens commented May 10, 2018

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

@wilomgfx
Copy link

@wilomgfx wilomgfx commented Jun 12, 2018

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

@macklinu
Copy link
Contributor

@macklinu macklinu commented Jun 23, 2018

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
Copy link

@Flaque Flaque commented Jun 23, 2018

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

@wilomgfx
Copy link

@wilomgfx wilomgfx commented Jun 23, 2018

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

@Flaque
Copy link

@Flaque Flaque commented Jun 23, 2018

@flippidippi
Copy link

@flippidippi flippidippi commented Jun 30, 2018

Anyone good at Vim plugins? 馃槃

@jxnblk
Copy link
Contributor

@jxnblk jxnblk commented Jul 14, 2018

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
Copy link
Contributor

@silvenon silvenon commented Jul 15, 2018

I just published vscode-mdx!

@kentcdodds
Copy link
Contributor

@kentcdodds kentcdodds commented Aug 9, 2018

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

@sibelius
Copy link

@sibelius sibelius commented Aug 13, 2018

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

would be cool to have an online version of it

@trevordmiller
Copy link
Contributor

@trevordmiller trevordmiller commented Aug 26, 2018

@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
Copy link

@hsribei hsribei commented Aug 28, 2018

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
Copy link
Member

@ChristopherBiscardi ChristopherBiscardi commented Aug 29, 2018

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.

screen shot 2018-08-29 at 10 02 16 am

@jonsuh
Copy link

@jonsuh jonsuh commented Oct 3, 2018

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鈥檛 perfect, but it鈥檚 better than no syntax highlighting at all. I鈥檝e never written language syntax before, so could use and would appreciate any help to improve it!

image

@silvenon
Copy link
Contributor

@silvenon silvenon commented Oct 4, 2018

@jonsuh great! 猸愶笍 It was my first time with VS Code as well, grammars are complicated and feel inherently hacky. 馃槄

@ryee-dev
Copy link

@ryee-dev ryee-dev commented Oct 10, 2018

Any updates on intellij/webstorm support? :(

@bradringel
Copy link

@bradringel bradringel commented Feb 4, 2019

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
Copy link
Contributor

@trevordmiller trevordmiller commented Mar 4, 2019

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

@trevordmiller
Copy link
Contributor

@trevordmiller trevordmiller commented Mar 4, 2019

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

@johno
Copy link
Member

@johno johno commented Mar 4, 2019

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

trevordmiller added a commit to trevordmiller/mdx that referenced this issue Mar 5, 2019
Based on the completed plugins from mdx-js#119
@trevordmiller
Copy link
Contributor

@trevordmiller trevordmiller commented Mar 5, 2019

@johno #436

johno added a commit that referenced this issue Mar 5, 2019
Based on the completed plugins from #119
@johno johno pinned this issue Apr 17, 2019
@johno johno changed the title Editor support 馃摑 Editor support Apr 17, 2019
@landsman
Copy link

@landsman landsman commented May 13, 2019

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

@wilomgfx
Copy link

@wilomgfx wilomgfx commented May 13, 2019

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

@rg1220
Copy link

@rg1220 rg1220 commented Jun 18, 2019

+1 for JetBrains IntelliJ/WebStorm support

@silvenon
Copy link
Contributor

@silvenon silvenon commented Jun 18, 2019

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.

@johno johno unpinned this issue Jul 11, 2019
unudeveloper pushed a commit to unudeveloper/FrankJSX that referenced this issue Aug 21, 2019
@ttasovac
Copy link

@ttasovac ttasovac commented Aug 24, 2019

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

@sbwx
Copy link

@sbwx sbwx commented Sep 17, 2019

  • 1 for emacs (+ markdown-mode js2)

@silvenon
Copy link
Contributor

@silvenon silvenon commented Oct 15, 2019

@ttasovac awesome! 鉂わ笍 I added it to the list

@bitwhys
Copy link

@bitwhys bitwhys commented Oct 29, 2019

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

webstorm-mdx

@silvenon
Copy link
Contributor

@silvenon silvenon commented Nov 9, 2019

@bitwhys cool! I updated the list.

@borisdiakur
Copy link

@borisdiakur borisdiakur commented Dec 19, 2019

The TextMateBundles 鈥渨ork around鈥 for JetBrains doesn鈥檛 work for me 馃槴. Any ideas anyone?

Screen Shot 2019-12-19 at 10 33 31

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
Copy link

@Danon Danon commented Feb 24, 2020

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
Copy link

@christopher-francisco christopher-francisco commented Mar 11, 2020

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

Screen Shot 2020-03-10 at 9 00 13 PM

:set ft returns markdown.mdx

@dandv
Copy link

@dandv dandv commented May 20, 2020

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

@mtrojanowski
Copy link

@mtrojanowski mtrojanowski commented Oct 6, 2020

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

@silvenon
Copy link
Contributor

@silvenon silvenon commented Oct 6, 2020

Thanks! Updated the list

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet