Custom file extensions and Espresso 2

A fair number of people write into MacRabbit support asking how to add support for a custom file extension to Espresso (common requests being for LESS or SCSS mapped to CSS, various templating languages mapped to HTML or PHP, etc.). Unfortunately, a number of articles persist online instructing people to modify the built-in language plug-ins that live inside the Espresso application, which is not a good method to accomplish this particular task because you lose your changes when you update Espresso (additionally, mucking around with the internal plug-ins can sometimes lead to really weird behavior; for instance, messing up the built-in CSS support can have wide-ranging implications on Espresso’s syntax coloring for all languages).

Adding support for custom file extensions is extremely easy, but is unfortunately not something you can currently do through the GUI. Here’s how to go about it:

  1. Create a folder named something memorable. For instance, if you are mapping .less to CSS you might call it “LESS-Standin”. Or if you are feeling capricious, perhaps “Snickersnack”.
  2. Drag and drop your new folder on the Espresso Dock icon to create a temporary project window
  3. Within your new project window, create a new file named Languages.xml

  4. Add the following code to your Languages.xml file and save the file:

    <?xml version="1.0" encoding="UTF-8"?>
<settings>
    <language id="com.yourdomain.less-standin" hidden="true">
        <root-zone>language-root.css</root-zone>

        <name>LESS Standin</name>

        <detectors>
            <extension>less</extension>
        </detectors>
    </language>
</settings>
  5. Convert the folder into a plug-in and install it (see below)

What you are doing is defining a new language for Espresso that references a pre-existing syntax. The things you will want to customize are the id attribute of the language element, the <root-zone> element, the <name> element, and your list of detectors.

You can find documentation for the available detectors in the Espresso plug-in development wiki, and here is a list of the most commonly-used root-zones that are included as of Espresso 2.1:

  • CSS: language-root.css
  • HTML: language-root.html
  • XML: language-root.xml
  • PHP: language-root.html.with-php
  • JavaScript: language-root.js
  • Markdown: language-root.markdown
  • Python: language-root.python
  • Ruby: language-root.ruby

If you wish for your language stand-in to show up in the View→Languages menu, remove the hidden="true" attribute from the language element. Also note that you can add multiple items within the <detectors> block in order to define multiple file extensions to map to the same language (so in the example above, you could add <extension>scss</extension> in order to map both LESS and SCSS to the built-in CSS parsing within the same plug-in).

Installing your new plug-in

You have a couple of ways you can install your new plug-in:

  1. Simply add a .sugar file extension to the folder you created, and double click to install it. This is a good option if you don’t expect to add support for other file extensions, since it’s straight forward and easy.

  2. Open up the Terminal and execute the following command (replacing the path to point to your new folder):

    cd ~/Library/Application\ Support/Espresso/Sugars
ln -s PATH/TO/LESS-Standin LESS-Standin.sugar

The latter option will create a symbolic link pointing to your folder, which allows you to easily modify your Languages.xml file down the road.

After installing your plug-in with either of the methods above, relaunch Espresso and you should be good to go!

Leave a response