Markdown + Latex Editor/Renderer

index.html

<link rel="stylesheet" href="https://unpkg.com/latex.css/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
  body > * {
    height: 100%;
    outline: none;
    border: none;
  }
  .hidden {
    visibility: hidden; /* display: none; remove history of textarea */
    height: 0;
  }
  textarea.hidden {
    margin-top: -10rem;
  }
</style>
<article tabindex="0"></article>
<textarea tabindex="0" class="hidden"></textarea>
<script>
  const $ = (tag) => document.querySelector(tag);

  $("textarea").value = localStorage.getItem("content");
  $("textarea").addEventListener("blur", () => {
    $("textarea").classList.toggle("hidden");
    $("article").classList.toggle("hidden");
    $("article").innerHTML = marked($("textarea").value);
    localStorage.setItem("content", $("textarea").value);
  });
  $("article").addEventListener("focus", () => {
    $("textarea").classList.toggle("hidden");
    $("article").classList.toggle("hidden");
    $("textarea").focus();
  });
  $("article").focus();
  $("textarea").blur();
</script>