Skip to content

Instantly share code, notes, and snippets.

@mnmly

mnmly/stack.html

Created January 13, 2012 16:37
Show Gist options
  • Save mnmly/1607386 to your computer and use it in GitHub Desktop.
Save mnmly/1607386 to your computer and use it in GitHub Desktop.
Download ZIP
CoffeeScript + Stylus Stack on jsbin.
Raw
stack.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>CoffeeScript+Stylus</title>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="http://learnboost.github.com/stylus/stylus.js"></script>
<style id="stylus">
body
font-family helvetica
p
color grey
font-size 30px
font-family sans-serif
font-weight bold
.error
padding 5px 10px
display block
top: 0
color white
font-family monospace
font-size 12
background hsla(10, 100%, 60%, 1, 0)
&::before
outline 1px solid
padding-left 3px
padding-right 3px
display inline-block
margin-right 10px
&.cs::before
content 'CoffeeScript'
&.styl
content 'Stylus'
</style>
</head>
<body>
<p>Write CoffeeScript code in the JavaScript panel</p>
<script type="text/coffeescript">
setTimeout(->
scripts = document.getElementsByTagName('script')
stylusStyle = document.getElementById('stylus')
try
out = CoffeeScript.compile(scripts[scripts.length-1].innerHTML, {bare: true})
catch error
e = document.createElement "span"
e.className = 'error cs'
e.innerText = error
document.body.insertBefore e, document.body.firstChild
stylus(stylusStyle.innerHTML.trim()).render (err, str)->
if err
e = document.createElement "span"
e.style.display = "block"
e.className = 'error styl'
e.innerText = err.name + ": #{err.message}"
console.log(err.name)
document.body.insertBefore e, document.body.firstChild
stylusStyle.innerHTML = str
eval(out)
, 10)
</script>
</body>
</html>
@mnmly
Copy link
Author

mnmly commented Jan 13, 2012

Here's on jsbin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment