blog/tblog/templates/snippets/blog-imports.html

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
{% if editor %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.37.1/ace.min.js"></script>
{% endif %}

<link rel="stylesheet" href="/static/css/blog.css">

<script>
  function toHTML(format, raw) {
    if (format == "markdown") {
      return `<div id="real-blog-container" data-blog-format="markdown">${DOMPurify.sanitize(marked.parse(raw))}</div>`;
    } else if (format == "html") {
      return `<div id="real-blog-container" data-blog-format="html">${DOMPurify.sanitize(raw)}</div>`;
    } else if (format == "mono") {
      return `<div id="real-blog-container" data-blog-format="mono"><pre class="no-margin">${raw.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;")}</pre></div>`;
    } else {
      return `<div id="real-blog-container" data-blog-format="plain"><pre class="not-code no-margin">${raw.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;")}</pre></div>`;
    }
  }

  {% if editor %}
    function createEditor(element, content, format, onChange) {
      let editor = ace.edit(element);

      if (format == "markdown") {
        editor.getSession().setMode("ace/mode/markdown");
      } else if (format == "html") {
        editor.getSession().setMode("ace/mode/html");
      }

      editor.setTheme("ace/theme/xcode");
      editor.getSession().on("change", function() {
        onChange(editor.getValue());
      });
      editor.setValue(content, 1);

      return editor;
    }
  {% endif %}
</script>