index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Turndown Demo</title>
<meta name="viewport" content="width=device-width">
<style>
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  body {
    margin: 0 auto;
    font-family: courier, monospace, sans-serif;
    line-height: 1.3125;
    color: #333;
  }

  header {
    padding: 0.5em;
    background-color: #fff;
    text-align: center;
  }

  footer {
    font-size: 0.875em;
    text-align: center;
    color: #666;
  }

  h1,
  label[for="input"],
  label[for="output"] {
    margin: 0;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.0625em;
    text-transform: uppercase;
  }

  label[for="input"],
  label[for="output"] {
    font-weight: 400;
  }

  .source-link {
    font-size: 0.875em;
  }

  .row:before,
  .row:after {
    content: " ";
    display: table;
  }

  .row:after {
    clear: both;
  }

  .row {
    *zoom: 1;
  }

  .col,
  .form-group {
    padding: 0 0.5em;
  }

  @media (min-width: 36em) {
    .col {
      float: left;
      width: 50%;
    }
  }

  textarea {
    width: 100%;
    height: 36em;
    margin: 0;
    padding: 0.5em;
    overflow: auto;
    border: 1px solid;
    background-color: #fff;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }

  #input {
    background-color: #333;
    color: #fff;
    border: none;
  }

  select {
    display: block;
    width: 100%;
    font-size: inherit;
  }

  .form-group {
    display: inline-block;
  }

  .form-group label {
    font-size: 0.875em;
  }
</style>
<script src="https://unpkg.com/turndown/dist/turndown.js"></script>
</head>
<body>
<header>
  <h1>turndown</h1>
  <a class="source-link" href="https://github.com/mixmark-io/turndown">Source on GitHub</a>
</header>
<div class="row">
  <div class="col">
    <label for="input">HTML</label>
    <textarea cols="100" rows=10 id="input"><h1>Turndown Demo</h1>

<p>This demonstrates <a href="https://github.com/mixmark-io/turndown">turndown</a> &ndash; an HTML to Markdown converter in JavaScript.</p>

<h2>Usage</h2>

<pre><code class="language-js">var turndownService = new TurndownService()
console.log(
  turndownService.turndown('&amp;lt;h1&amp;gt;Hello world&amp;lt;/h1&amp;gt;')
)</code></pre>

<hr />

<p>It aims to be <a href="http://commonmark.org/">CommonMark</a>
 compliant, and includes options to style the output. These options include:</p>

<ul>
  <li>headingStyle (setext or atx)</li>
  <li>horizontalRule (*, -, or _)</li>
  <li>bullet (*, -, or +)</li>
  <li>codeBlockStyle (indented or fenced)</li>
  <li>fence (` or ~)</li>
  <li>emDelimiter (_ or *)</li>
  <li>strongDelimiter (** or __)</li>
  <li>linkStyle (inlined or referenced)</li>
  <li>linkReferenceStyle (full, collapsed, or shortcut)</li>
</ul></textarea>
  </div>
  <div class="col">
    <label for="output">Markdown</label>
    <textarea readonly cols="100" rows=10 id="output"></textarea>
  </div>
</div>

<div class="row">
  <form method="get" action="/turndown" id="options">
    <div class="form-group">
      <label for="headingStyle">Heading style</label>
      <select name="headingStyle" id="headingStyle">
        <option value="setext">setext</option>
        <option value="atx">atx</option>
      </select>
    </div>

    <div class="form-group">
      <label for="hr">Horizontal rule</label>
      <select name="hr" id="hr">
        <option value="* * *">* * *</option>
        <option value="- - -">- - -</option>
        <option value="_ _ _">_ _ _</option>
      </select>
    </div>

    <div class="form-group">
      <label for="bulletListMarker">Bullet</label>
      <select name="bulletListMarker" id="bulletListMarker">
        <option value="*">*</option>
        <option value="-">-</option>
        <option value="+">+</option>
      </select>
    </div>

    <div class="form-group">
      <label for="codeBlockStyle">Code block style</label>
      <select name="codeBlockStyle" id="codeBlockStyle">
        <option value="indented">indented</option>
        <option value="fenced">fenced</option>
      </select>
    </div>

    <div class="form-group">
      <label for="fence">Fence</label>
      <select name="fence" id="fence">
        <option value="```">```</option>
        <option value="~~~">~~~</option>
      </select>
    </div>

    <div class="form-group">
      <label for="emDelimiter">Em delimiter</label>
      <select name="emDelimiter" id="emDelimiter">
        <option value="_">_</option>
        <option value="*">*</option>
      </select>
    </div>

    <div class="form-group">
      <label for="strongDelimiter">Strong delimiter</label>
      <select name="strongDelimiter" id="strongDelimiter">
        <option value="**">**</option>
        <option value="__">__</option>
      </select>
    </div>

    <div class="form-group">
      <label for="linkStyle">Link style</label>
      <select name="linkStyle" id="linkStyle">
        <option value="inlined">inlined</option>
        <option value="referenced">referenced</option>
      </select>
    </div>

    <div class="form-group">
      <label for="linkReferenceStyle">Link reference style</label>
      <select name="linkReferenceStyle" id="linkReferenceStyle">
        <option value="full">full</option>
        <option value="collapsed">collapsed</option>
        <option value="shortcut">shortcut</option>
      </select>
    </div>
  </form>
</div>

<footer><p>Turndown is copyright &copy; 2017 <a href="http://www.domchristie.co.uk/">Dom Christie</a> and is released under the MIT license</p></footer>
<script>
  ;(function () {
    var input = document.getElementById('input')
    var output = document.getElementById('output')
    var optionsForm = document.getElementById('options')
    var turndownService = new window.TurndownService(options())

    input.addEventListener('input', update)

    optionsForm.addEventListener('change', function () {
      turndownService = new window.TurndownService(options())
      update()
    })

    update()

    function update () {
      output.value = turndownService.turndown(input.value)
    }

    function options () {
      var opts = {}
      var inputs = optionsForm.getElementsByTagName('select')
      for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i]
        opts[input.name] = input.value
      }
      return opts
    }
  })()
</script>
</body>
</html>