Rendering latex/mathjax equations in django

Question

The first thing I want to do is profusely thank any person that takes the time to read this. The post looks long, but this is mostly because I formatted it with bullet points and I wanted to be as detailed as possible and provide a minimal working example. This is my first time embarking on an independent coding project and my first ever Stack Exchange post so even though I checked to not break any rules, I might have missed something.

I am working on my first django project (supposed to be a simple blog) and I think I am running into a lot of unknown unknowns. I want to: - Render [;\LaTeX] style mathematical formulae in an article template that I am using. The template is an HTML file and the source code is found here. It extends this base template

I have tried

the django-mathjax package. After I followed the instructions and my project did not compile, I tired the suggestion in this stack exchange post to no avail.
With code from this youtube video, I created a sample html file that did what I wanted but it fell apart when I added it to the base_layout template in my project.

At this point, I got desperate. I then tried:

django-tex
django-latexify
I read this stack exchange post and it almost made sense
this post in /r/django which does say to use mathjax, but I unfortunately have been failing at this so far Based off of all this, I have some questions that hopefully you all can help me out with.
1. Suppose you want to do something in python. You find a random package on github that claims to do it for you, but you have never heard of it before, it has not been updated in 2 years. Do you trust it? How do you go about selecting packages for a project/ goal if it requires using a package that is not one of the canonical ones (like numpy) that you KNOW you can trust?
2. Why is MathJax the best way to incorporate latex style equations to websites/ HTML/ CSS
3. I feel like the first package should have worked and maybe I am making a mistake with my virtual environment. Is there a way to confirm this (sorry I know this is super vague)
4. Most important: Given that I have tried so many different things and none of them worked, how do I go about discerning what my next step is. Should the fact that my templates are HTML files guide me?
5. If the answer to my dilemma is in the MathJax documentation or the Django documentation, how would I effectively search for it?

Did you check my previous answer : https://stackoverflow.com/questions/48297768/django-how-to-integrate-a-maths-editor/48329350#48329350 ? You don't necessarily need a django extension, just some js libs ... — Gerard Rozsavolgyi, Dec 12 '19 at 07:33
@GerardRozsavolgyi I do remember seeing it, but I was confused as to how I could integrate a character field as part of the body of my article/ freely use it as in answer. But it looks like your answer may be able to replicate this(?)/ looks very easy to implement and I am probably not understanding something more basic, like how django works. I used a relatively dated youtube tutorial for this project and I'm starting to think I did not quite learn/ gain proficiency with django api... However, I appreciate your input, and I might have follow up questions later if that's ok. — Carlos, Dec 12 '19 at 15:10
A CharField is just to store the data, you can display it in various ways in the body of your article as answered below — Gerard Rozsavolgyi, Dec 12 '19 at 16:01

score 4 · Answer 1 · answered Dec 12 '19 at 12:48

I'll risk expanding on one aspect, that of template files. It's perhaps a shame that Django doesn't come with a common base template, that one has to actively replace should it not fulfill one's needs. Sooner or later one will need one, and it would be nice if installing Django gave you a canonical one and all the beginner tutorials used it.

Anyway, taking Kent Shikama's answer, my site's template for generating his html would look like

{% extends "myproject/base.html" %}

{% block extrascripts %}
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js">
  </script>
{% endblock extrascripts %}

{% block content %}
$$x=\frac{-b+\sqrt{b^2-4ac}}{2a}$$
{% endblock content %}

As for what that base.html might be, a simple one that would yield the the html in that answer plus a couple of HTML comments, would be

<html>
<head>
{% block scripts %}
<!-- put here any scripts (such as JQuery ) that you want to be loaded 
     UNLESS the specific template requires otherwise 
     by overriding this block. Add scripts via extrascripts below. 
-->
{% endblock scripts}
{% block extrascripts %}{%endblock extrascripts%}

{% block css %}
<!-- put here any CSS styling you want to be loaded 
     UNLESS the specific template requires otherwise, 
     by overriding this block. Add extra styling via extracss below. 
-->
{% endblock css %}
{% block extracss %}{% endblock extracss %}

</head>

<body> 
  {% block content %}{% endblock content %}
</body>
</html>

If it's a maths blog project, you might well promote the MathJax script from this individual template, into block scripts in base.html. Your templates would then contain only a content block and could freely use MathJax.

The key thing is that your specific page templates only need to include scripts and styling that are different from the scripts and styling that you use with every page on your project. You can then re-style your entire site just be altering that base html.

In the real world an intermediate level of templates that extend base.html and are in turn extended by individual page templates is common, so an entire class of pages can be specified without repetition.

Thank you so much! I will be spending some time making sure that I understand this answer very well, and I may have some follow up q's if that is ok... Seriously though, I really appreciate the help! — Carlos, Dec 12 '19 at 15:18

score 3 · Answer 2 · answered Dec 12 '19 at 07:51

Congratulations on your first SO post. I would say you nailed it in terms of asking a question; to nitpick, I would have just inlined the code.

Unfortunately, it looks like the main mirror that mathjax advertises from Cloudflare is inaccessible right now (gives me a 403), so maybe that caused you issues.

Django templates render HTML and ultimately you're just rendering an HTML page. Try running the following HTML file in your browser locally. It should just work. All Django does with templates is dynamically inject the body that I've hard coded here: essentially you just need to render a character field (instead of the hard coding) and it should be good to go.

<html>
<head>
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js">
  </script>
</head>
<body>
  $$x=\frac{-b+\sqrt{b^2-4ac}}{2a}$$
</body>
</html>

You find a random package on github that claims to do it for you, but you have never heard of it before, it has not been updated in 2 years. Do you trust it?

This is actually quite a tough question, and I would be surprised if anyone comes along and gives a clear cut answer. I would treat everything on a case by case basis. In this case, if you dive into the source code, basically the whole library is just this one file. The library essentially just injects the mathjax script. And so, in short, I wouldn't bother with the library in this case.

Thanks so much for your help! Using a mix of your's and @nigel222 's answers, I was able to get MathJax working. If it is ok, I might have follow up questions later, as I am very new to this and I don't quite understand every part of your answer — Carlos, Dec 12 '19 at 15:11

Rendering latex/mathjax equations in django

2 Answers2