<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>highlight.js demo</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="perfect-scrollbar.min.css">

  <link rel="stylesheet" title="Default" href="styles/default.css">
  <% _.each(styles, function(style) { %>
  <link rel="alternate stylesheet" title="<%= style.name %>" href="<%= style.path %>">
  <% }); %>
</head>
<body>
  <div id="sidebar">

    <div id="header">
      <h1><a href="https://highlightjs.org/">highlight.js</a> demo</h1>
    </div>

    <div id="lists">
      <div>
        <h2>Language categories</h2>
        <ul id="categories"></ul>
      </div>

      <div>
        <h2>Styles</h2>
        <ul id="styles"></ul>
      </div>
    </div>

  </div>

  <div id="content">

  <div id="languages">
    <% _.each(blobs, function(blob) { %>
    <% var categories = blob.fileInfo.Category; %>
    <div <% if(categories) { %>class="<%= categories.join(' ') %>"<% } %>>
      <h2><%- blob.fileInfo.Language %></h2>
      <pre><code class="<%- path.basename(blob.name, '.js') %>"><%- blob.result %></code></pre>
    </div>
    <% }); %>
  </div>

  </div>

  <script src="../highlight.pack.js"></script>
  <script src="jquery-2.1.1.min.js"></script>
  <script src="perfect-scrollbar.min.js"></script>
  <script src="demo.js"></script>
</body>
</html>
