Always Twisted

This page is old.

Although the content of this page may be useful. The page was part of a migratian and may look different and unmaintained. I am working my way through, tidying them up.

🙏🖤

Getting .liquid working with Emmet in Atom

On This Page:

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.

Is your CSS architecture scalable enough to support multiple teams and projects?

I can restructure your CSS for better scalability and maintainability.

get in touch!