Skip to content

Instantly share code, notes, and snippets.

@imgarylai
Created November 23, 2019 23:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save imgarylai/d5ddf20544e39a875c96b7e582e7c8bf to your computer and use it in GitHub Desktop.
Save imgarylai/d5ddf20544e39a875c96b7e582e7c8bf to your computer and use it in GitHub Desktop.
Edit MJML in JetBrains family IDE

MJML is one of the best frameworks to help developers write a responsive email template. The syntax is easy to learn. The code can be organized easily. The documentation provides many example scenarios for developers to create the template by the need.

Unfortunately, there is no good plugin supporting mjml syntax in JetBrains IDE. However, it is not too bad. It is easy to configure it by yourself to make it easier to write the template in the IDE. I will use Rubymine as an example.

First of all, since mjml is like HTML syntax. We can make the IDE recognize the *.mjml files as HTML code first. Also, since variables will be passed to the template, and we want to use ERB tag in the template. We should make the IDE recognize the MJML file type as RHTML by adding *.mjml to Preferences > Editor > File Types > Recognized File Types > RHTML.

mjml

There is one more step to make the IDE more powerful. We also want the IDE supporting the autocomplete. This can be achived by adding the following tags to HTML Uknown tags

mj-accordion
mj-accordion-element
mj-accordion-text
mj-accordion-title
mj-attributes
mj-all
mj-body
mj-breakpoint
mj-button
mj-carousel
mj-carousel-image
mj-class
mj-column
mj-divider
mj-font
mj-group
mj-head
mj-hero
mj-image
mj-include
mj-navbar
mj-navbar-link
mj-preview
mj-raw
mj-section
mj-social
mj-social-element
mj-spacer
mj-style
mj-table
mj-text
mj-title
mj-wrapper
mjml

Add tags above to Preferences > Editor > Inspections > HTML > Unknown HTML tag > Options > Custom HTML tags.

html-tag

@gusdecool
Copy link

Webstorm didn't have RHTML file types.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment