{# Be aware that we need these extra new lines here or marked will not realise that the <div>
   is HTML and wrap each line in a <p> - thus breaking the HTML #}

<div>
  <a ng-click="openPlunkr('{$ doc.example.outputFolder $}')" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>
  <div class="runnable-example"
      path="{$ doc.example.outputFolder $}"
      {%- for attrName, attrValue in doc.example.attributes %}
      {$ attrName $}="{$ attrValue $}"{% endfor %}>

   {% for fileName, file in doc.example.files %}
    <div class="runnable-example-file" {% for attrName, attrValue in file.attributes %}
      {$ attrName $}="{$ attrValue $}"{% endfor %}>
      {% code -%}
      {$ file.fileContents $}
      {%- endcode %}
    </div>
  {% endfor %}

    <iframe class="runnable-example-frame" src="{$ doc.example.outputFolder $}/index.html" name="{$ doc.example.id $}"></iframe>
  </div>
</div>

{# Be aware that we need these extra new lines here or marked will not realise that the <div>
   above is HTML and wrap each line in a <p> - thus breaking the HTML #}