The following is a space I am using to test and develop a code highlighting module for this site.

HTML

<html>  
    <head>
        <title>A title</title>
    <head>
    <body>
        <h1>A heading</h1>
    </body>
</html>  

JavaScript

// here is some JavaScript
var x = new customButton("Hello World!");  

Css

.notify {
  color: rgba(255, 0, 0, 0.2);
  background: purple;
  border: 1px solid hsl(100,70%,40%);
  transition: color 0.3s linear;
}

div {  
  background: -moz-linear-gradient(left,  #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* IE10+ */
  background: linear-gradient(to right,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C */
}

Less

@nice-blue: #5B83AD;
#header a {
    color: hsla(102, 53%, 42%, 0.4);
}

@easing: cubic-bezier(0.1,0.3,1,.4);
@gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);

#header a {
  background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
  background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */

  transition-timing-function: ease;
}

Sass

$color: blue
@mixin foobar1
  color: rgba(147, 32, 34, 0.8)
.foo
  color: pink

$gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
@mixin foobar2
  background: -moz-radial-gradient(center, ellipse cover,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%)
  background: radial-gradient(ellipse at center,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%)

$easing: ease-out
.foo
  transition: color 0.3s ease-in-out

Scss

$color: blue;
$attr: background;
.foo {
    #{$attr}-color: rgba(255,255,0,0.75);
}

$gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
$easing: linear;
$attr: background;

.foo {
    #{$attr}-image: repeating-linear-gradient(10deg, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px);

  transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
}

Stylus

color = olive  
.foo
  color: #000

gradient = linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)  
.foo
  background-image: repeating-radial-gradient(circle, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px)

easing = ease-in  
.foo
  transition: color 0.3s ease-out