Grow your CSS skills. Land your dream job.

LESS/SASS Highlighting with Highlight.js

  • # March 8, 2013 at 7:35 pm

    Hey all,

    So I’m working on a way to add syntax highlighting to my site, and [thanks to this forum post](http://css-tricks.com/forums/discussion/952/css-tricks-syntax-highlight-plugin/p1 “the forum post”), I found [Highlight.js](http://softwaremaniacs.org/soft/highlight/en/ “the library homepgae”), a javascript library that checks and highlights your code.

    Unfortunately, I’d like to be able to display the occasional LESS code, but LESS is not a language supported by Highlight.js. I’m not familiar with JavaScript and was wondering if I could force specific highlighting onto blocks of code that have a class of `.css`, `.html`, `.php`, etc.

    Not being familier with JS, [the documentation](http://highlightjs.readthedocs.org/ “the documentation”) is extremely confusing, and does not provide any examples.

    Help is always appreciated,
    Noel

    # March 31, 2013 at 3:32 pm

    Problem solved!

    I was actually able to get LESS highlighting working, but a different way than I originally expected. It turns out that the [LESS Website](http://lesscss.org/ “The Less Website”) has a great little highlighter that basically does what Highlight.js has done. I was able to include it on my own site, and the thing works great!

    I’ve gone ahead and copied the plugin into a [public gist](http://gist.github.com/thenoelforte/5277779 “my little gist for less highlighting with the plugin that I borrowed”) so that people can have access to it. Hooray! I also went ahead and opened an issue on the [LESS github repository](http://github.com/cloudhead/less.js/issues/1249 “The LESS github repo”) so that people can contribute to making this more of a reality, because according to the developers, the highliting plugin for less is out of date.

    Hope this is helpful! I’ll mark this as solved.

    # March 31, 2013 at 5:03 pm

    Thanks for posting back, when you originally posted this I looked at Highlight.js but couldn’t think of a solution in a reasonable time. Starred that gist for future reference ;)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".