Blog

Add syntax highlighting to Espresso for {less} files

Posted on by Di

To use the CSS syntax highlighting for {less} files follow this quick guide:

  1. Control-click on the Espresso.app icon and click Show Package Contents.
  2. Go to Contents > SharedSupport > Sugars and copy the CSS.sugar file to ~/Library/Application Support/Espresso/Sugars/.
  3. Open this new copy of the CSS.sugar folder, open the Languages.xml file and find the line <extension>css</extension>.
  4. Under this line add a new line like this: <extension>less</extension>.
  5. Save the file and launch Espresso, you should now see colourised .less files.

This entry was posted in Web Design / Dev and tagged , . Bookmark the permalink.

2 Responses to Add syntax highlighting to Espresso for {less} files

  1. Heather says:

    Thank you for these instructions. I’m trying to redact a growing CSS file for a large enterprise application into less and decided to try out Espresso/CSSEdit to help with forming proper less.
    When I followed your instructions, CSS.sugar was a directory rather than a file and the direction I was looking for was in the file languages.xml. I just wanted to add that in case someone else looking for these same instructions got a bit hung up on the same part. Other than that, this worked perfectly. This was just what I needed. Thanks!

    • Di says:

      Thanks for pointing that out, I edited my copy with Textedit by dumping the whole folder into it so I must has glossed over that bit. I’ve updated the guide to make it clearer.