joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    WAT?

Quick demo of Embedded Literate CoffeeScript

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.2.9/marked.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link rel="stylesheet" href="style.css">
<body>
  <div id="hi"></div>
  <div id="markdown"></div>
<script type="text/coffeescript">
  i = document.scripts.length - 1
  markdown.innerHTML = marked document.scripts[i].innerHTML
  for block in document.querySelectorAll 'code'
    block.className = "prettyprint lang-coffee"
</script>
<script type="text/literate-coffeescript">

  Quick demo of
  [Embedded](https://github.com/jashkenas/coffee-script/pull/2718)
  [Literate CoffeeScript](http://ashkenas.com/literate-coffeescript/)

      hello = (name) -> "hello #{name}!".toUpperCase()
      hi.innerHTML = "<h1>#{hello 'world'}</h1>"

</script>

## style.css
@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 {
  margin: 2em 0 2em -20px;
  padding-left: 18px;
  border-left: 4px solid #999;
  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;
}

.html .value,
.javascript .string,
.javascript .regexp {
  color: #756bb1;
}

.html .tag,
.css .tag,
.javascript .keyword {
  color: #3182bd;
}

.comment {
  color: #636363;
}

.html .doctype,
.javascript .number {
  color: #31a354;
}

.html .attribute,
.css .attribute,
.javascript .class,
.javascript .special {
  color: #e6550d;
}

svg {
  font: 10px sans-serif;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

sup, sub {
  line-height: 0;
}

/* Prettify classes */
.pln { color: #002b36; }
.pun { color: #268bd2; }
.str { color: #859900; }
.kwd { color: #859900; }
.com { color: #586175; }
.typ { color: #b58900; }
.lit { color: #2aa198; }
.opn { color: #839496; }
.clo { color: #839496; }
.tag { color: #268bd2; }
.atn { color: #586175; }
.atv { color: #2aa198; }
.dec { color: #268bd2; }
.var { color: #268bd2; }
.fun { color: #FF0000; }
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.2.9/marked.min.js"></script>
	<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
	<link rel="stylesheet" href="style.css">
	<body>
	<div id="hi"></div>
	<div id="markdown"></div>
	<script type="text/coffeescript">
	i = document.scripts.length - 1
	markdown.innerHTML = marked document.scripts[i].innerHTML
	for block in document.querySelectorAll 'code'
	block.className = "prettyprint lang-coffee"
	</script>
	<script type="text/literate-coffeescript">

	Quick demo of
	[Embedded](https://github.com/jashkenas/coffee-script/pull/2718)
	[Literate CoffeeScript](http://ashkenas.com/literate-coffeescript/)

	hello = (name) -> "hello #{name}!".toUpperCase()
	hi.innerHTML = "<h1>#{hello 'world'}</h1>"

	</script>
	@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 {
	margin: 2em 0 2em -20px;
	padding-left: 18px;
	border-left: 4px solid #999;
	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;
	}

	.html .value,
	.javascript .string,
	.javascript .regexp {
	color: #756bb1;
	}

	.html .tag,
	.css .tag,
	.javascript .keyword {
	color: #3182bd;
	}

	.comment {
	color: #636363;
	}

	.html .doctype,
	.javascript .number {
	color: #31a354;
	}

	.html .attribute,
	.css .attribute,
	.javascript .class,
	.javascript .special {
	color: #e6550d;
	}

	svg {
	font: 10px sans-serif;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	sup, sub {
	line-height: 0;
	}

	/* Prettify classes */
	.pln { color: #002b36; }
	.pun { color: #268bd2; }
	.str { color: #859900; }
	.kwd { color: #859900; }
	.com { color: #586175; }
	.typ { color: #b58900; }
	.lit { color: #2aa198; }
	.opn { color: #839496; }
	.clo { color: #839496; }
	.tag { color: #268bd2; }
	.atn { color: #586175; }
	.atv { color: #2aa198; }
	.dec { color: #268bd2; }
	.var { color: #268bd2; }
	.fun { color: #FF0000; }