Code Tests

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

HTML

1 <html>
2     <head>
3         <title>A title</title>
4     <head>
5     <body>
6         <h1>A heading</h1>
7     </body>
8 </html>

JavaScript

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

Css

 1 .notify {
 2   color: rgba(255, 0, 0, 0.2);
 3   background: purple;
 4   border: 1px solid hsl(100,70%,40%);
 5   transition: color 0.3s linear;
 6 }
 7 
 8 div {
 9   background: -moz-linear-gradient(left,  #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%); /* FF3.6+ */
10   background: -webkit-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Chrome10+,Safari5.1+ */
11   background: -o-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* Opera 11.10+ */
12   background: -ms-linear-gradient(left,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* IE10+ */
13   background: linear-gradient(to right,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%); /* W3C */
14 }

Less

 1 @nice-blue: #5B83AD;
 2 #header a {
 3 	color: hsla(102, 53%, 42%, 0.4);
 4 }
 5 
 6 @easing: cubic-bezier(0.1,0.3,1,.4);
 7 @gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
 8 
 9 #header a {
10   background: -moz-linear-gradient(-45deg,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
11   background: -webkit-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
12   background: -o-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
13   background: -ms-linear-gradient(-45deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
14   background: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
15 
16   transition-timing-function: ease;
17 }

Sass

 1 $color: blue
 2 @mixin foobar1
 3   color: rgba(147, 32, 34, 0.8)
 4 .foo
 5   color: pink
 6 
 7 $gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%)
 8 @mixin foobar2
 9   background: -moz-radial-gradient(center, ellipse cover,  #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%)
10   background: radial-gradient(ellipse at center,  #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%)
11 
12 $easing: ease-out
13 .foo
14   transition: color 0.3s ease-in-out

Scss

 1 $color: blue;
 2 $attr: background;
 3 .foo {
 4     #{$attr}-color: rgba(255,255,0,0.75);
 5 }
 6 
 7 $gradient: linear-gradient(135deg,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
 8 $easing: linear;
 9 $attr: background;
10 
11 .foo {
12     #{$attr}-image: repeating-linear-gradient(10deg, rgba(255,0,0,0), rgba(255,0,0,1) 10px, rgba(255,0,0,0) 20px);
13 
14   transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
15 }

This project is maintained by adaydremer