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' |
|
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);} |
|
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 |
|
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> |
|
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
<div class="awesome"> <h1>HTML to Jade Example</h1> <p>This page was coded with HTML</p> </div> |