mixin sample(name)
  - var s = self.self[name];
  h3= s.title
  if s.description
    p= s.description
  p: a(data-toggle='collapse' href='#code-sample-' + name) Show code

  pre.collapse(id='code-sample-' + name)
    code.js= s.code

  .row(id=name)
    .col-xs-6
      textarea.source= s.source
    section.col-xs-6
      .result

doctype html
html
  head
    script(src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')

    script(src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js')
    link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css')

    script(src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js')
    link(rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css')

    script(src='../dist/remarkable.js')

    link(rel='stylesheet' href='./assets/index.css')
    script(src='./assets/index.js')

  body
    .container
      h1 remarkable demo

      h2 Basic examples

      +sample('demo1')
      +sample('demo2')

      h2 Advanced examples

      +sample('demo3')
      +sample('demo4')
      +sample('demo5')