Sith/core/templates/core/markdown_textarea.jinja

<div>
	<textarea name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>
	{% if widget.value %}{{ widget.value }}{% endif %}</textarea>

	{# The simplemde script can be included twice, it's safe in the code #}
	<script src="{{ statics.js }}"> </script>
	<script type="text/javascript">
		var css = "{{ statics.css }}";

		// Only import the css once
		if (!document.head.innerHTML.includes(css)){
			document.head.innerHTML += '<link rel="stylesheet" href="' + css + '">';
		}

		// You can't get the csrf token from the template in a widget
		// We get it from a cookie as a workaround, see this link
		// https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax
		function getCookie(cname) {
			var name = cname + "=";
			var decodedCookie = decodeURIComponent(document.cookie);
			var ca = decodedCookie.split(';');
			for(var i = 0; i <ca.length; i++) {
				var c = ca[i];
				while (c.charAt(0) == ' ') {
					c = c.substring(1);
				}
				if (c.indexOf(name) == 0) {
					return c.substring(name.length, c.length);
				}
			}
			return "";
		}

		// Custom markdown parser
		function customMarkdownParser(plainText, preview) {
			$.ajax({
				url: "{{ markdown_api_url }}",
				method: "POST",
				data: { text: plainText, csrfmiddlewaretoken: getCookie('csrftoken') },
			}).done(function (msg) {
				preview.innerHTML = msg;
			});
		}

		// Pretty markdown input
		var simplemde = new SimpleMDE({
			element: document.getElementById("{{ widget.attrs.id }}"),
			spellChecker: false,
			previewRender: function(plainText, preview){ // Async method
				customMarkdownParser(plainText, preview);
				return preview.innerHTML;
			}
		});

	</script>
</div>