RSS

How to enable syntax highlighting for LESS in Notepad++

07 Jul

After doing a fair bit of searching over several days, I found a way to enable syntax highlighting for the LESS CSS programming language in my text editor of choice, Notepad++. The real key here was finding this page, which lists countless user-defined language files for Notepad++. From there, you can download the LESS.js file. It is an XML file. Once you’ve downloaded that, simply open up Notepad++, go into the View menu,  then click User-Defined Dialogue. That will make a dialogue box pop up. Toward the top of the box, there’s a button that says Import… click it and select the LESS XML file that you downloaded. Close the window, and go to a .less file. Go into the Languages menu, and you should see LESS at the bottom of the list.  After you click on it, the .less file you have open should show proper syntax highlighting.

One issue I ran into with this is that the LESS escape character, ~ is not included in the language file download. Luckily, this is easy to fix by returning to the User-Defined Dialogue box. In the dialogue box, underneath the Operators tab, check the box that says “Enable escape character”, and type “~” into the adjacent text box. Voila!

One other thing: since this is a user defined language, if you are using a style other than the default style in Notepad++, the highlighting will look strange; all the text will be highlighted in white (it looks weird against a black background). I haven’t found a way around this yet, and am just using the Default Notepad++ style when I’m working on .less files.

About these ads
 
21 Comments

Posted by on July 7, 2011 in Programming, Software, Uncategorized

 

Tags: , , , ,

21 responses to “How to enable syntax highlighting for LESS in Notepad++

  1. Matija

    October 17, 2011 at 3:06 am

    Thank you! I don’t know why this was so hard to find elsewhere by googling …

     
  2. web design

    December 5, 2011 at 12:37 pm

    Thanks for tutorial…I tried this but it is not working for me…I use v5.9.6.2.
    This is very useful…but it will be great if you made it with print Screens.

     
  3. Mehdi Bouhalassa

    January 12, 2012 at 7:59 pm

    Wow, thanks! Saved my life!

     
  4. Jonathan

    January 17, 2012 at 8:55 pm

    Awesome! Thank you so much for posting this! It’s a big help.

     
  5. Bart Nelis

    June 2, 2012 at 1:04 am

    Thanks for this great tutorial and all the links .. concerning the less escape character, the ” ~” .. I only got it to work properly when i not only – like you suggest – checked the ‘escape character’ checkbox; but *also* add the ~ to the operators in the dialog above : click the ~symbol in the left column and click the arrow ‘–>’ so the ~ is included in the list of activated operators

     
  6. Aron Lakatos

    July 25, 2012 at 12:08 pm

    So what about the code completion (auto-complete) feature? If I switch to the newly imported LESS language, the CSS-autocomplete is not available. Any idea how to merge both of the functions? So having the syntax-highlight of LESS and autocomplete of CSS.

     
    • julialt

      July 25, 2012 at 2:30 pm

      Hey Aron, I haven’t found a way to allow for CSS autocomplete when using the LESS language file. With my configuration of Notepad++, it will autocomplete in LESS files based on words I’ve already typed in the file, and that’s been good enough for me. I did a quick search, and it looks like to have autocomplete work for a user-defined language in Notepad++, the user-defined language file has to have extra information in it’s configuration file (http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Editing_Configuration_Files#Autocompletion.2C_aka_API.2C_files). The LESS language file I use and link to in the post doesn’t have that information, so to make autocomplete work, I think you would have to add to the language file.

       
  7. Auss

    September 22, 2012 at 11:13 pm

    Many thanks for this information … but have a question:
    What about this square in some .less pages:
    &:before {font-family: FontAwesome; content: “”;}
    ???

     
  8. fuxo

    October 9, 2012 at 7:38 pm

    Really helpful manual. Thanks.

     
  9. gennaro

    October 17, 2012 at 12:21 pm

    in notepad++ 6.2 I can’t find in “…the dialogue box, underneath the Operators tab, check the box that says “Enable escape character”, and type “~” into the adjacent text boin “.
    Where shall I place it?

     
  10. Jun Pintsik

    October 23, 2012 at 4:21 am

    i can finally work with LESS with syntax highlighting. thanks for this tutorial.
    -
    you can set the white background to transparent so it looks good on dark backgrounds by going to the User Defined Dialogue, with LESS selected as language, right click on on all instances of background-color color boxes in all four tabs.

     
  11. shawn rice (@iamshawnrice)

    December 31, 2012 at 4:53 pm

    Nice One.

    Every time I get one step closer to converting to sublime text, I find functionality like this that keeps me with ++.

    Thanks.

     
  12. martin

    February 22, 2013 at 12:33 am

    great thanks very much, it works! :)

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: