How to render the markdown content in the front-end using django-mdeditor?

I am using django-mdeditor (https://github.com/pylixm/django-mdeditor) in a project of mine. I have integrated the editor in the admin panel. How can I render the saved markdown content in the front-end?

django-mdeditor must be using some function to generate the live-preview in its editor. The solution to me question would be finding that particular function. I can then use the same function to render the content in the front-end. Can someone help me with that?

Solution

I raised an issue - https://github.com/pylixm/django-mdeditor/issues/67, and the reply from the repository owner solved my problem.

In brief, follow along the lines of this template - https://github.com/pylixm/django-mdeditor/blob/master/mdeditor_demo_app/templates/show.html.

Include -

<link href="{% static 'mdeditor/css/editormd.min.css' %}" rel="stylesheet">
<link href="{% static 'mdeditor/css/editormd.preview.css' %}" rel="stylesheet">

at the <head></head> of the template.

and, include -

<script src="{% static 'mdeditor/js/jquery.min.js' %}"></script>
<script src="{% static 'mdeditor/js/editormd.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/marked.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/prettify.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/raphael.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/underscore.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/flowchart.min.js' %}"></script>
<script src="{% static 'mdeditor/js/lib/jquery.flowchart.min.js' %}"></script>
<script>
  $(function () {
      // content is the id of the <tag> you want to be render.
      // Refer to the link of the template shared with this answer.
      editormd.markdownToHTML("content", {
          emoji           : true,
          taskList        : true,
          tex             : true,  
          flowChart       : true,  
          sequenceDiagram : true,  
      });
  })

</script>

at the end of the <body> of the template.

That's it :D