Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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)->
        console.log arguments
        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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers