Getting Started
A work in progress...
Markups
| Source File | Result File | |
|---|---|---|
| CoffeeKup to HTML | ||
coffeekup-to-html.html.ck
div class:'awesome', ->
h1 'CoffeeKup Example'
p 'This page was coded with coffeekup'
|
coffeekup-to-html.html
<div class="awesome"> <h1>CoffeeKup Example</h1> <p>This page was coded with coffeekup</p> </div> |
|
| CoffeeScript to JavaScript | ||
coffeescript-to-javascript.js.coffee
# Type here!
math =
root: Math.sqrt
square: square
cube: (x) -> x * square x
alert "Three cubed is #{math.cube 3}"
|
coffeescript-to-javascript.js
(function() {
var math;
math = {
root: Math.sqrt,
square: square,
cube: function(x) {
return x * square(x);
}
};
alert("Three cubed is " + (math.cube(3)));
}).call(this);
|
|
| HAML to HTML | ||
haml-to-html.html.haml
%div.awesome %h1 HAML Example %p This page was coded with HAML. |
haml-to-html.html
<div class="awesome"><h1>HAML Example</h1><p>This page was coded with HAML.</p></div> |
|
| HTML to CoffeeKup | ||
html-to-coffeekup-example.ck.html
<div class="awesome">
<h1>HTML to CoffeeKup Example</h1>
<p>This page was coded with HTML</p>
</div>
|
html-to-coffeekup-example.ck
div '.awesome', -> h1 'HTML to CoffeeKup Example' p 'This page was coded with HTML' |
|
| HTML to Jade | ||
html-to-jade-example.jade.html
<div class="awesome">
<h1>HTML to Jade Example</h1>
<p>This page was coded with HTML</p>
</div>
|
html-to-jade-example.jade
html
body
.awesome
h1 HTML to Jade Example
p This page was coded with HTML
|
|
| Jade to HTML | ||
jade-to-html.html.jade
div.awesome
h1 Jade Example
p This page was coded with jade.
|
jade-to-html.html
<div class="awesome"><h1>Jade Example</h1><p>This page was coded with jade.</p></div> |
|
| JavaScript to CoffeeScript | ||
javascript-to-coffeescript.coffee.js
/* Type here! */
(function ($) {
$.fn.highlight = function () {
$(this).css({ color: 'red', background: 'yellow' });
$(this).fadeIn();
};
})(jQuery);
|
javascript-to-coffeescript.coffee
(($) ->
$.fn.highlight = ->
$(this).css
color: "red"
background: "yellow"
$(this).fadeIn()
) jQuery
|
|
| LessCSS to CSS | ||
less-to-css.css.less
.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
@val: @x @y @blur rgba(0, 0, 0, @alpha);
box-shadow: @val;
-webkit-box-shadow: @val;
-moz-box-shadow: @val;
}
.box { @base: #f938ab;
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0, 0, 5px, 0.4) }
}
|
less-to-css.css
.box{color:#fe33ac;border-color:#fdcdea;}.box div{box-shadow:0 0 5px rgba(0, 0, 0, 0.4);-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.4);-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.4);}
|
|
| Roy to JavaScript | ||
roy-to-javascript.js.roy
let gcd a b =
if b == 0 then
a
else
gcd b (a % b)
console.log (gcd 49 35)
|
roy-to-javascript.js
var gcd = function(a, b) {
return (function() {
if(b == 0) {
return a;
} else {
return gcd(b, a % b);
}
})();
}
console.log(gcd(49, 35))
|
|
| SASS to CSS | ||
sass-to-css.css.sass
a
:color #fff
&:hover
:color #000
&.active
:background #888
&:hover
:color #fff
|
sass-to-css.css
a {
color: #fff;}
a:hover {
color: #000;}
a.active {
background: #888;}
a.active:hover {
color: #fff;}
|
|
| Stylus to CSS | ||
stylus-to-css.css.stylus
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
body a
font 12px/1.4 "Lucida Grande", Arial, sans-serif
background black
color #ccc
form input
padding 5px
border 1px solid
border-radius 5px
|
stylus-to-css.css
body a{font:12px/1.4 "Lucida Grande",Arial,sans-serif;background:#000;color:#ccc}
form input{padding:5px;border:1px solid;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
|
|
| Markdown to HTML | ||
markdown-to-html.html.md
# Markdown Example This page was coded with _markdown_. |
markdown-to-html.html
<h1>Markdown Example</h1> <p>This page was coded with <em>markdown</em>.</p> |
|