joyrexus/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<body>
<h1>READ.ME</h1>
<p>Why can&#39;t we just fence our code?</p>
<pre><code>print = console.log</code></pre>
<p>Another chunk of code:</p>
<pre><code>print &#39;hello world!&#39;</code></pre>

## marko.coffee
#!/usr/bin/env coffee

help = '''

  marko [options] FILES

  options:

    -h, --help        show help
    -r, --run         run fenced code

'''

fs = require 'fs'
marked = require 'marked'
coffee = require 'coffee-script'
argv = require('optimist')
  .boolean(['h', 'r'])
  .alias('h', 'help')
  .alias('r', 'run')
  .argv

print = console.log
print help if argv.help

head = '''
       <!DOCTYPE html>
       <meta charset="utf-8">
       <link rel="stylesheet" href="style.css">
       <body>

       '''

for file in argv._ when file.match /\.(litcoffee|md)/i
  text = fs.readFileSync file, 'utf8'
  if argv.run
    tokens =  marked.lexer text
    code = (t.text for t in tokens when t.type == 'code').join "\n"
    coffee.eval code
  else
    print head, marked text

## 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 {
  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;
}

q:before,
blockquote:before {
  content: "‚Äú";
}

q:after,
blockquote:after {
  content: "‚Äù";
}

blockquote:before {
  position: absolute;
  left: 2em;
}

blockquote:after {
  position: absolute;
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<body>
	<h1>READ.ME</h1>
	<p>Why can't we just fence our code?</p>
	<pre><code>print = console.log</code></pre>
	<p>Another chunk of code:</p>
	<pre><code>print 'hello world!'</code></pre>
	#!/usr/bin/env coffee

	help = '''

	marko [options] FILES

	options:

	-h, --help show help
	-r, --run run fenced code

	'''

	fs = require 'fs'
	marked = require 'marked'
	coffee = require 'coffee-script'
	argv = require('optimist')
	.boolean(['h', 'r'])
	.alias('h', 'help')
	.alias('r', 'run')
	.argv

	print = console.log
	print help if argv.help

	head = '''
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<body>

	'''

	for file in argv._ when file.match /\.(litcoffee\|md)/i
	text = fs.readFileSync file, 'utf8'
	if argv.run
	tokens = marked.lexer text
	code = (t.text for t in tokens when t.type == 'code').join "\n"
	coffee.eval code
	else
	print head, marked text
	@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;
	}

	.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;
	}

	q:before,
	blockquote:before {
	content: "‚Äú";
	}

	q:after,
	blockquote:after {
	content: "‚Äù";
	}

	blockquote:before {
	position: absolute;
	left: 2em;
	}

	blockquote:after {
	position: absolute;
	}