3

I'm making a personal homepage with Django. I am using django-markdownx for the content of article model. In addition, Katex has been implemented to the project with lines of JS in the Django template HTML to render Latex.

What I'm having a hard time is applying this Katex JS code to the Django admin page. How can I implement the JS code below to specific elements of the Django admin page? I don't want the script to be applied to all elements of the admin page, because editing text boxes should show raw Latex code, but only the preview part should render Latex parts as equations.

Here are django-markdownx, and Katex references:
https://neutronx.github.io/django-markdownx/
https://katex.org/docs/api.html

This is a JS code block that I'm using for Latex rendering.

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"
      integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq"
      crossorigin="anonymous"
    />

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script
      defer
      src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"
      integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz"
      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.11.1/dist/contrib/auto-render.min.js"
      integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI"
      crossorigin="anonymous"
      onload="renderMathInElement(document.body);"
    ></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          delimiters: [
            { left: "$$", right: "$$", display: true },
            { left: "\\[", right: "\\]", display: true },
            { left: "$", right: "$", display: false },
            { left: "\\(", right: "\\)", display: false }
          ]
        });
      });
    </script>
Pedram Parsian
  • 3,750
  • 3
  • 19
  • 34
Chanwoo Ahn
  • 334
  • 2
  • 13

0 Answers0