#EDIT CSS IN MJML INSTALL#
#EDIT CSS IN MJML CODE#

is a JetBrains Support post indicating this extension doesn't work reliably with recent versions of Chrome.

#EDIT CSS IN MJML INSTALL#

includes past instructions to install and enable this extension. : This is a (temporary) point of confusion. Mj-all,mj-accordion,mj-accordion-element,mj-accordion-text,mj-accordion-title,mj-attributes,mj-body,mj-breakpoint,mj-button,mj-carousel,mj-class,mj-column,mj-divider,mj-font,mj-group,mj-head,mj-hero,mj-image,mj-include,mj-navbar,mj-preview,mj-raw,mj-section,mj-spacer,mj-style,mj-table,mj-text,mj-title,mj-wrapper,mjmlĪdd MJML tag attribute list (v 4.6.3) įile > Settings > Editor > Inspections > HTML > Unknown HTML tag attribute >Īlign,alt,background-color,background-height,background-position,background-repeat,background-size,background-url,background-width,base-url,borderborder-bottom,border-color,border-left,border-radius,border-right,border-style,border-top,border-width,cellpadding,cellspacing,color,container-background-color,css-class,direction,fluid-on-mobile,font-family,font-size,font-style,font-weight,full-width,hamburger,height,href,ico-align,ico-close,ico-font-family,ico-font-size,ico-line-height,ico-open,ico-padding,ico-padding-bottom,ico-padding-left,ico-padding-right,ico-padding-top,ico-text-decoration,ico-text-transform,icon-align,icon-height,icon-padding,icon-position,icon-size,icon-unwrapped-alt,icon-unwrapped-url,icon-width,icon-wrapped-alt,icon-wrapped-url,inline,inner-background-color,inner-border,inner-border-bottom,inner-bottom-left,inner-border-radius,inner-border-right,inner-border-top,inner-padding,left-icon,letter-spacing,line-height,mj-class,mode,name,padding,padding-bottom,padding-left,padding-right,padding-top,rel,right-icon,src,srcset,table-layout,target,tb-border,tb-border-radius,tb-hover-border-color,tb-selected-border-color,tb-width,text-align,text-decoration,text-padding,text-transform,thumbnails,thumbnails-src,title,usemap,vertical-align,widthĭon’t use the Chrome Extension “JetBrains IDE Support” refers to URLs listed at the end.Ĭonfiguring the IDEs for Syntax HighlightingĪdd *.mjml to HTML file extensions or the HTML template language of your choice įile > Settings > Editor > File Types > Recognized File Types: > HTML, clickAns > File Name Patterns: > + > *.mjmlįile > Settings > Editor > Inspections > HTML > Unknown HTML tag > PHP users may find it worth checking for the PhpStorm versions. In many cases, JetBrains also supports a matching web page with '/help/phpstorm/' in the URL. JetBrains supports many web pages (all helpful IMO) with '/help/webstorm/' in the URL. I found the following sufficient to add MJML syntax highlighting in JetBrains WebStorm and PhpStorm (here, 'IDEs') and to use Live Edit with MJML in the IDEs.

I'm very open to knowing how this can be better.

Now IDE knows that it's a HTML file so can reformat it with HTML in mind.

#EDIT CSS IN MJML CODE#

May need to add them (tags) to some HTML formatter rules as well at 'Settings/Preferences | Editor | Code Style | HTML | Other'.but since you do not use such tags there it will be fine. It will be applied to pure HTML files as well. Add all those tags as custom HTML tags to 'Settings/Preferences | Editor | Inspections | HTML | Unknown HTML tag' inspection.If it uses custom file extension - just add appropriate pattern to HTML files entry. Leave file so it gets treated as HTML by IDE.which means it has to be coded as plugin in Java/Kotlin. You basically saying to IDE that the file is not HTML and it should use those simple rules for highlighting.įormatter knows nothing about how the valid code may look here (since it's not HTML any more in IDE eyes) and each supported language implements own formatter rules. Custom file type is just for highlighting purposes only (and basic completion help).

Edit css in mjml