Always Twisted

{ Slightly Bizarre Ramblings Of A Front-End Developer }

Getting .liquid working with Emmet in Atom

I've been using Atom for quite some time now, I managed to snag a beta invite on the day it was released and I've been enjoying seeing it improve and all the new plugins and themes that I manage to come across almost daily.

I do have a problem however.

Predominantly I use Mixture for my front-end development work. Mixture uses the liquid language to let you do some funky things. I also like using Emmet so that I don't have to labouriously write out HTML and CSS.

Unfortunately the Emmet plugin doesn't seem to recognise the .liquid file type and adding the liquid language plugin to Atom doesn't seem to do anything either.

But I found a fix.

If you open your preferences in Atom (cmd + P) then filter through your installed packages for the language HTML package, open it.

Then guide yourself to the file called html.json which is in the folder 'grammars'.

At the top of the file (html.json) there will be a list of file types including HTML, SHTML, XHTML etc.

Follow the .json format and add "liquid" to the bottom.

Save and close the file, close that window for that package.

Reload your project and you should find that you can now use all the emmet shortcodes and shortcuts in your liquid files.

Easy. Apart from this needs to be done on every update of Atom.

Categories

Rants HTML Javascript Did you like this post? Hire me.
blog comments powered by Disqus