{# 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 class="runnable-example"
    path="{$ doc.example.deployments.default.path $}"
    {%- for attrName, attrValue in doc.example.attributes %}
    {$ attrName $}="{$ attrValue $}"{% endfor %}>

  <md-content>
    <md-tabs md-dynamic-height="false" md-border-bottom>
    {% for fileName, file in doc.example.files %}
      <md-tab label="{$ file.name $}">
        <md-content class="md-padding">
          <div class="runnable-example-file" {% for attrName, attrValue in file.attributes %}{$ attrName $}="{$ attrValue $}"{% endfor %}>
          {% code -%}
            {$ file.fileContents $}
          {%- endcode %}
          </div>
        </md-content>
      </md-tab>
    {% endfor %}
    </md-tabs>
  </md-content>
  <iframe class="runnable-example-frame" src="{$ doc.example.deployments[deploymentTarget].outputPath $}" name="{$ doc.example.id $}"></iframe>
</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 #}