class Slider
constructor: (@i, @range) ->
@ui = '<span class="slider">' + @i + '</span>'
slider = (i, range) -> new Slider i, rangeThere are #{sacks} sacks
Every sack had #{cats.ui} cats
Every cat had #{kits.ui} kits
sacks = 3
cats = slider 7, [1..10]
kits = slider 7, [1..10]How many kits total?
Answer: #{sacks * cats.i * kits.i}
| #!/usr/bin/env coffee | |
| # | |
| # Crude hack to demo litcoffee interpolation | |
| help = ''' | |
| marko [options] FILES | |
| options: | |
| -h, --help show help | |
| -r, --run run code blocks | |
| -x, --extract extract code blocks | |
| -i, --interpolate interpolate values from code blocks | |
| ''' | |
| fs = require 'fs' | |
| coffee = require 'coffee-script' | |
| marked = require 'marked' | |
| options = | |
| gfm: true, | |
| pedantic: false, | |
| sanitize: false, | |
| langPrefix: 'prettyprint lang-' | |
| highlight: (code, lang) -> code | |
| marked.setOptions options | |
| argv = require('optimist') | |
| .boolean(['h', 'r', 'x', 'i']) | |
| .alias('h', 'help') | |
| .alias('r', 'run') | |
| .alias('x', 'extract') | |
| .alias('i', 'interpolate') | |
| .argv | |
| print = console.log | |
| print help if argv.help | |
| head = ''' | |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> | |
| <body> | |
| ''' | |
| interpolate = (text) -> | |
| t = text.replace(/\n/g, '\\n').replace(/"/g, '\\"') | |
| coffee.eval '"' + t + '"' | |
| codeFrom = (source) -> | |
| (t.text for t in marked.lexer(source) when t.type is 'code').join "\n" | |
| parsed = (source) -> | |
| coffee.eval codeFrom source | |
| tokens = marked.lexer source, options | |
| for t in tokens | |
| if t.type is 'code' | |
| t.lang = 'coffee' if not t.lang | |
| else | |
| t.text = interpolate t.text | |
| marked.parser tokens, options | |
| for file in argv._ when file.match /\.(litcoffee|md)/i | |
| source = fs.readFileSync file, 'utf8' | |
| if argv.run and /coffee/.test file | |
| coffee.eval codeFrom source | |
| else if argv.extract | |
| print codeFrom source | |
| else if argv.interpolate and /coffee/.test file | |
| print head, parsed source | |
| else | |
| print head, marked source |
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:200,400,600); | |
| html { | |
| min-width: 1040px; | |
| } | |
| body { | |
| font-family: "Source Code Pro", sans-serif; | |
| margin: 1em auto 4em auto; | |
| position: relative; | |
| width: 960px; | |
| color: #555; | |
| background: whiteSmoke; | |
| } | |
| h1 { | |
| font-size: 64px; | |
| font-weight: 200; | |
| letter-spacing: -6px; | |
| margin: .8em 0 .1em 0; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| h2 { | |
| font-size: 100%; | |
| margin-top: 2em; | |
| } | |
| h1, h2 { | |
| text-rendering: optimizeLegibility; | |
| } | |
| h2 a { | |
| color: #ccc; | |
| left: -20px; | |
| position: absolute; | |
| width: 740px; | |
| } | |
| h3, h4, h5 { | |
| font-size: 100%; | |
| font-weight: 400; | |
| margin-top: .8em; | |
| } | |
| h3, h4 { | |
| text-transform: uppercase; | |
| } | |
| h4 { | |
| color: #AAA; | |
| } | |
| footer { | |
| font-size: small; | |
| margin-top: 8em; | |
| } | |
| header aside { | |
| margin-top: 80px; | |
| } | |
| header aside, | |
| footer aside { | |
| text-align: right; | |
| } | |
| aside { | |
| font-size: small; | |
| right: 0; | |
| position: absolute; | |
| width: 180px; | |
| color: #AAA; | |
| } | |
| .attribution { | |
| font-size: small; | |
| margin-bottom: 2em; | |
| } | |
| i, cite, em, var, address, dfn { | |
| font-style: normal; | |
| border-bottom: 1px solid #CCC; | |
| } | |
| body > p, li > p { | |
| line-height: 1.5em; | |
| } | |
| body > p { | |
| width: 720px; | |
| } | |
| body > blockquote { | |
| width: 640px; | |
| } | |
| li { | |
| width: 680px; | |
| } | |
| a { | |
| color: steelblue; | |
| } | |
| a:not(:hover) { | |
| text-decoration: none; | |
| } | |
| pre, code, textarea { | |
| font-family: "Source Code Pro", monospace; | |
| color: #444; | |
| } | |
| code { | |
| line-height: 1em; | |
| } | |
| textarea { | |
| font-size: 100%; | |
| } | |
| body > pre { | |
| border-left: solid 2px #ccc; | |
| padding-left: 18px; | |
| margin: 2em 0 2em -20px; | |
| } | |
| /* .pln { color: #bd3613; } */ | |
| .str { color: #269186; } | |
| .kwd { color: #859900; } | |
| .com { color: #586175; } | |
| .typ { color: #b58900; } | |
| .lit { color: #2aa198; } | |
| .pun { color: #839496; } | |
| .opn { color: #839496; } | |
| .clo { color: #839496; } | |
| .tag { color: #268bd2; } | |
| .atn { color: #586175; } | |
| .atv { color: #2aa198; } | |
| .dec { color: #268bd2; } | |
| .var { color: #268bd2; } | |
| .fun { color: #FF0000; } |