CODEWITHSUNDEEP
pythondjangopython-3.xlatexmathjax
Carlos
Carlos

Reputation: 101

Rendering latex/mathjax equations in django

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

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

Upvotes: 7

Views: 4665

Answers (2)

nigel222
nigel222

Reputation: 8212

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/[email protected]/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.

Upvotes: 4

Kent Shikama
Kent Shikama

Reputation: 4060

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/[email protected]/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.

Upvotes: 3

Related Questions