Fix katex render to allow math inline

4 files changed, 30 insertions, 6 deletions

diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index 2cc2e62..586ae18 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -1,13 +1,20 @@
 $(document).ready(function() {
-    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
     var simplemde = new SimpleMDE({
         element: document.getElementById("id_description"),
         forceSync: true,
         hideIcons: ["preview", "side-by-side", "fullscreen"]
     });
     simplemde.codemirror.on("change", function() {
-        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
         $("#description_body").html(simplemde.markdown(simplemde.value()));
+        renderMathInElement(
+          document.body,
+          {
+            delimiters: [
+              {left: "$$", right: "$$", display: false},
+              {left: "$", right: "$", display: true},
+            ]
+          }
+        );
     });
     const player = new Plyr('#player');
     var timer = $("#vtimer");
diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index 2cc607c..4fa12c7 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -52,12 +52,21 @@
   <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
 
   <!-- To automatically render math in text elements, include the auto-render extension: -->
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
-      onload="renderMathInElement(document.body);"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous">
+  </script>
  
   <script>
       new WOW().init();
       $(document).ready(function() {
+        renderMathInElement(
+          document.body,
+          {
+            delimiters: [
+              {left: "$$", right: "$$", display: false},
+              {left: "$", right: "$", display: true},
+            ]
+          }
+        );
         $(".alert").delay(2000).slideUp(200, function() {
             $(this).alert('close');
         });
diff --git a/yaksh/templates/yaksh/show_lesson_quiz.html b/yaksh/templates/yaksh/show_lesson_quiz.html
index 2bb51ea..82e01bc 100644
--- a/yaksh/templates/yaksh/show_lesson_quiz.html
+++ b/yaksh/templates/yaksh/show_lesson_quiz.html
@@ -1,7 +1,15 @@
 {% load custom_filters %}
 <script type="text/javascript">
     $(document).ready(function() {
-      renderMathInElement(document.body);
+      renderMathInElement(
+        document.body,
+        {
+          delimiters: [
+            {left: "$$", right: "$$", display: false},
+            {left: "$", right: "$", display: true},
+          ]
+        }
+      );
     });
     function user_arranged_options() {
         var temp_array = []
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 6e3cabb..627773d 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -163,7 +163,7 @@
                         </a>
                     </div>
                     <div class="collapse show" id="toc-collapse">
-                        <div class="card-body" id="toc">
+                        <div class="card-body" id="toc" style="max-height: 400px; overflow-y: auto;">
                             <table class="table table-responsive">
                                 {% for content in toc %}
                                     {% with content.get_toc_text as toc_name %}