Add mathjax support in lesson and module

5 files changed, 58 insertions, 44 deletions

diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index 55d4846..6eaf6c6 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -32,13 +32,10 @@ $(document).ready(function(){
         });
     });
 
-    function preview_text(data){
-        var preview_div = $("#preview_text_div");
-        if (!preview_div.is(":visible")){
-            $("#preview_text_div").toggle();
-        }
+    function preview_text(data) {
         $("#description_body").empty();
-        $("#description_body").append(data);
+        $("#description_body").html(data);
+        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
     }
 
     $("#embed").click(function() {
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index b984db0..4211b1b 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -9,6 +9,8 @@
 </script>
 <script type="text/javascript" src="{% static 'yaksh/js/jquery-ui.js' %}">
 </script>
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
+</script>
 {% endblock %}
 
 {% block css %}
@@ -17,15 +19,15 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
+<div class="container-fluid">
 {% if error %}
 <div class="alert alert-danger">
     {{error}}
 </div>
 {% endif %}
-<div class="container">
+<div class="container-fluid">
     <div class="row justify-content-center form-group">
-        <div class="col-md-9 col-md-offset-4">
+        <div class="col-md-5 col-md-offset-4">
             <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
                 <i class="fa fa-arrow-left"></i>&nbsp;Back
             </a>
@@ -137,18 +139,20 @@
                     </center>
                     </form>
                     <hr>
-                    <div class="card" id="preview_text_div" style="display: none;">
-                        <div class="card-heading">
-                            <center>
-                                <h3>Description Preview</h3>
-                            </center>
-                        </div>
-                        <div class="card-body" id="description_body">
-                        </div>
-                    </div>
                 </fieldset>
             </form>
         </div>
+        <div class="col-md-6">
+            <div class="card" id="preview_text_div">
+                <div class="card-header">
+                    <center>
+                        <h3>Description Preview</h3>
+                    </center>
+                </div>
+                <div class="card-body" id="description_body">
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/add_module.html b/yaksh/templates/yaksh/add_module.html
index 262c009..7112485 100644
--- a/yaksh/templates/yaksh/add_module.html
+++ b/yaksh/templates/yaksh/add_module.html
@@ -11,6 +11,8 @@
 </script>
 <script type="text/javascript" src="{% static 'yaksh/js/jquery-ui.js' %}">
 </script>
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
+</script>
 {% endblock %}
 
 {% block css %}
@@ -19,17 +21,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-{% if messages %}
-    {% for message in messages %}
-    <div class="alert alert-dismissible alert-{{ message.tags }}">
-        <button type="button" class="close" data-dismiss="alert">
-            <i class="fa fa-close"></i>
-        </button>
-        <strong>{{ message }}</strong>
-    </div>
-    {% endfor %}
-{% endif %}
+<div class="container-fluid">
 {% if course_id %}
     <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
         <i class="fa fa-arrow-left"></i>
@@ -43,10 +35,23 @@
 {% endif %}
 </div>
 <br>
-{% if status == "add" %}
 <div class="container">
+{% if messages %}
+    {% for message in messages %}
+    <div class="alert alert-dismissible alert-{{ message.tags }}">
+        <button type="button" class="close" data-dismiss="alert">
+            <i class="fa fa-close"></i>
+        </button>
+        <strong>{{ message }}</strong>
+    </div>
+    {% endfor %}
+{% endif %}
+</div>
+<br>
+{% if status == "add" %}
+<div class="container-fluid">
     <div class="row justify-content-center form-group">
-        <div class="col-md-9 col-md-offset-4">
+        <div class="col-md-5 col-md-offset-4">
             <form name=frm id=frm action="" method="post">
                 <fieldset>
                     {% csrf_token %}
@@ -92,18 +97,20 @@
                     </center>
                     </form>
                     <hr>
-                    <div class="card" id="preview_text_div" style="display: none;">
-                        <div class="card-heading">
-                            <center>
-                                <h3>Description Preview</h3>
-                            </center>
-                        </div>
-                        <div class="card-body" id="description_body">
-                        </div>
-                    </div>
                 </fieldset>
             </form>
         </div>
+        <div class="col-md-5">
+            <div class="card" id="preview_text_div">
+                <div class="card-header">
+                    <center>
+                        <h3>Description Preview</h3>
+                    </center>
+                </div>
+                <div class="card-body" id="description_body">
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 {% endif %}
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index a2edbe0..9c8d133 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -1,8 +1,12 @@
 {% extends "user.html" %}
+{% load static %}
 {% load custom_filters %}
 
 {% block title %} {{ learning_module.name }} {% endblock %}
-
+{% block script %}
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
+</script>
+{% endblock %}
 {% block main %}
 <div class="wrapper">
     <!-- Sidebar  -->
diff --git a/yaksh/views.py b/yaksh/views.py
index 3adb536..15ebd03 100644
--- a/yaksh/views.py
+++ b/yaksh/views.py
@@ -3,7 +3,7 @@ import csv
 from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
 from django.contrib.auth import login, logout, authenticate
 from django.shortcuts import render, get_object_or_404, redirect
-from django.template import Context, Template
+from django.template import Context, Template, loader
 from django.http import Http404
 from django.db.models import Max, Q, F
 from django.db import models
@@ -23,7 +23,7 @@ from django.urls import reverse
 import json
 from textwrap import dedent
 import zipfile
-from markdown import Markdown
+import markdown
 try:
     from StringIO import StringIO as string_io
 except ImportError:
@@ -101,7 +101,9 @@ CSV_FIELDS = ['name', 'username', 'roll_number', 'institute', 'department',
 
 def get_html_text(md_text):
     """Takes markdown text and converts it to html"""
-    return Markdown().convert(md_text)
+    return markdown.markdown(
+        md_text, extensions=['tables', 'fenced_code']
+    )
 
 
 def formfield_callback(field):