<script id="tmpl" type="text/html">
    
#page
  +h1{Emmet as a Template}
  +hr
  +(#nav
    >(a[href="#one"]{one}+{ | }
     +a[href="#two"]{two}+{ | }
     +a[href="#three"]{three})
  ) 
  +(#main
    >p{This is just an experiment. Not super useful.})
    +hr
    +#footer>h3{footer}
   
 </script> 
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

hr {
  border: none;
  border-bottom: 1px solid #ccc; 
}

a {
  color: #4c7aa8;
}
document.body.innerHTML = emmet.expandAbbreviation(
  document.getElementById('tmpl')
  .innerHTML
  .replace(/\s+\+/g,'+')
  .replace(/\n/g,'')
  .replace(/\s+\>/g,'>')
  .replace(/\s+/g,' ')
  .replace(/\$\{0\}/g,'')
).replace(/\$\{0(.*?)\}/g,'');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/17496/emmet.min.js