codigocomentado/templates/admin/add_post.html.tera

{% extends "base" %}

{% block extracss %}
<style>
  div.container {
      display: grid;
      grid-template-columns: 1fr 1fr;
  }

  div.editable form {
      height: 100%;
  }

  div.editable input#title {
      width: 76%;
      margin: 10px 10px 10px 0;
  }

  div.editable textarea {
      width: 95%;
      height: 85%;
      box-sizing: border-box;
  }
</style>
{% endblock extracss %}

{% block content %}
<div class="editable">
  <form action="" method="post">
    <input id="title" name="title" type="text"/>
    <label for="">Visible</label>
    <input name="published" type="checkbox" value="true"/>
    <textarea id="content" name="content"></textarea>
    <input name="views" type="number" value="0" style="display: none"/>
    <button>Publicar</button>
  </form>
</div>
<div id="preview" class="preview">
</div>
{% endblock content %}

{% block extrajs %}
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script>
  function delay(fn, ms) {
      let timer = 0
      return function(...args) {
          clearTimeout(timer)
          timer = setTimeout(fn.bind(this, ...args), ms || 0)
      }
  }

  let converter = new showdown.Converter({
      parseImgDimensions: true,
      strikethrough: true,
      tables: true,
      tasklists: true,
      emoji: true
  });
  document.getElementById("content").addEventListener("keyup", delay(() => {
      let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
      document.getElementById("preview").innerHTML = converter.makeHtml(text);
  }, 500));

  document.getElementById("title").addEventListener("keyup", delay(() => {
      let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
      document.getElementById("preview").innerHTML = converter.makeHtml(text);
  }, 500));
</script>
{% endblock extrajs %}