Use LESS in JSFiddle, the easy way

If your like me then you love online ‘tinker tools’ like JSFiddle, they allow you to quickly prototype your ideas and to share them with the world. I have been using it for a while now but one of the things that always bugged me is the lack of LESS support in the panels 🙁

I decided to have a play and see if I can get LESS running but somehow still allow me to write my CSS in the correct panel. The quickest way I could think of doing this is with this one liner

1
2
3
<pre>
    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
</pre>

It’s a really simple 2 step shim. First find the <Style> tag and change its type to ‘text/less’. Second tell less to refresh the styles on the page. You can see a working version here

Of course this may not be the best way of doing this but its the first thing that came into my head. Got any suggestions for an improvement?

I have emailed Piotr Zalewa to see if there are any plans to implement LESS in the future so I will update here if I get a reply.

Edit: JSFiddle have their docs on GitHub here.

An Issue has already been raised to add LESS support but it has been closed of saying it will be in the Beta release

https://github.com/jsfiddle/jsfiddle-docs-alpha/issues/168

Update: Piotr replied to my email and informed me they are planning on adding a few extra languages to support. Although they state in the above issue that LESS support will in bete he says it might be possible to add it before although there would be no ETA.

Thanks for the reply Piotr and looking forward to future updates ^_^