template.html

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>mdown.vim preview</title>

  <meta name="viewport" content="width=device-width">

  <style>

/* Some simple Github-like styles, with syntax highlighting CSS via Pygments. */
html {
  background:#fff;
  margin:0;
  padding:0;
}
body {
  font: 14px helvetica,arial,freesans,clean,sans-serif;
  line-height: 1.6;
  margin: 0 auto;
  padding: 20px;
  text-align:left;
  color: #333;
  width:920px;
}

.md {
  background-color: #eee;
  border-radius:3px;
  margin: 0;
  padding:3px;
}

article {
  padding: 30px;
  border: 1px solid #cacaca;
  background-color: white;
}
article > :first-child {
  margin-top: 0!important;
}

h1 {
  font-size:28px;
  margin-bottom:10px;
  color: black;
}

h2 {
  font-size:24px;
  margin:20px 0 10px;
  color: black;
  border-bottom: 1px solid #ccc;
}

h3 {
  font-size:18px;
  margin:20px 0 10px;
}

h4 {
  font-size:16px;
  font-weight:bold;
  margin:20px 0 10px;
}

h5 {
  font-size:14px;
  font-weight:bold;
  margin:20px 0 10px;
}

h6 {
  color:#777;
  font-size:14px;
  font-weight:bold;
  margin:20px 0 10px;
}

hr {
  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC) repeat-x 0 0;
  border: 0 none;
  height: 4px;
  margin: 15px 0;
  padding: 0;
}


p {
  margin: 15px 0;
}

pre, code {
  font: 12px 'Bitstream Vera Sans Mono','Courier',monospace;
}
.highlight pre, pre {
  background-color:#f8f8f8;
  border:1px solid #ccc;
  font-size:13px;
  line-height:19px;
  overflow:auto;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  padding:6px 10px;
}


code {
  white-space:nowrap;
  border:1px solid #eaeaea;
  background-color:#f8f8f8;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  margin:0 2px;
  padding:0 5px;
}

pre>code
{
  white-space:pre;
  border:none;
  background:transparent;
  margin:0;
  padding:0;
}

a, a code {
  color: #4183C4;
  text-decoration:none;
}


blockquote
{
  border-left:4px solid #ddd;
  padding-left:11px;
  color:#555;
  margin:14px 0;
}

table
{
  font-size: 14px;
  border-collapse:collapse;
  margin:20px 0 0;
  padding:0;
}

table tr
{
  border-top:1px solid #ccc;
  background-color:#fff;
  margin:0;
  padding:0;
}

table tr:nth-child(2n)
{
  background-color:#f8f8f8;
}
table tr th[align="center"], table tr td[align="center"] {
  text-align:center;
}
table tr th, table tr td
{
  border:1px solid #ccc;
  text-align:left;
  margin:0;
  padding:6px 13px;
}

ul, ol
{
  margin:15px 0;
}

ul li, ol li
{
  margin-top:7px;
  margin-bottom:7px;
}


.shadow {
  -webkit-box-shadow:0 5px 15px #000;
  -moz-box-shadow:0 5px 15px #000;
  box-shadow:0 5px 15px #000;
}


/* Pygments coloring */
.highlight .c{color:#998;font-style:italic;}
.highlight .err{color:#a61717;background-color:#e3d2d2;}
.highlight .k{font-weight:bold;}
.highlight .o{font-weight:bold;}
.highlight .cm{color:#998;font-style:italic;}
.highlight .cp{color:#999;font-weight:bold;}
.highlight .c1{color:#998;font-style:italic;}
.highlight .cs{color:#999;font-weight:bold;font-style:italic;}
.highlight .gd{101  5799  101  5799    0     0  11023      0 --:--:-- --:--:-- --:--:-- 47925
color:#000;background-color:#fdd;}
.highlight .gd .x{color:#000;background-color:#faa;}
.highlight .ge{font-style:italic;}
.highlight .gr{color:#a00;}
.highlight .gh{color:#999;}
.highlight .gi{color:#000;background-color:#dfd;}
.highlight .gi .x{color:#000;background-color:#afa;}
.highlight .go{color:#888;}
.highlight .gp{color:#555;}
.highlight .gs{font-weight:bold;}
.highlight .gu{color:#800080;font-weight:bold;}
.highlight .gt{color:#a00;}
.highlight .kc{font-weight:bold;}
.highlight .kd{font-weight:bold;}
.highlight .kn{font-weight:bold;}
.highlight .kp{font-weight:bold;}
.highlight .kr{font-weight:bold;}
.highlight .kt{color:#458;font-weight:bold;}
.highlight .m{color:#099;}
.highlight .s{color:#d14;}
.highlight .na{color:#008080;}
.highlight .nb{color:#0086B3;}
.highlight .nc{color:#458;font-weight:bold;}
.highlight .no{color:#008080;}
.highlight .ni{color:#800080;}
.highlight .ne{color:#900;font-weight:bold;}
.highlight .nf{color:#900;font-weight:bold;}
.highlight .nn{color:#555;}
.highlight .nt{color:#000080;}
.highlight .nv{color:#008080;}
.highlight .ow{font-weight:bold;}
.highlight .w{color:#bbb;}
.highlight .mf{color:#099;}
.highlight .mh{color:#099;}
.highlight .mi{color:#099;}
.highlight .mo{color:#099;}
.highlight .sb{color:#d14;}
.highlight .sc{color:#d14;}
.highlight .sd{color:#d14;}
.highlight .s2{color:#d14;}
.highlight .se{color:#d14;}
.highlight .sh{color:#d14;}
.highlight .si{color:#d14;}
.highlight .sx{color:#d14;}
.highlight .sr{color:#009926;}
.highlight .s1{color:#d14;}
.highlight .ss{color:#990073;}
.highlight .bp{color:#999;}
.highlight .vc{color:#008080;}
.highlight .vg{color:#008080;}
.highlight .vi{color:#008080;}
.highlight .il{color:#099;}
  </style>

</head>
<body>

 $body

 <!-- lr snippet: http://feedback.livereload.com/knowledgebase/articles/86180-how-do-i-add-the-script-tag-manually- -->
 <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

</body>
</html>