[Django]-How to configure Mathjax in Python Django


If the page’s content is dynamically created, you will need to call MathJax after the content has been loaded. See the documentation for details. The main idea is that you have to include


in the javascript that is executed after the content is in place.


fOR Dynamic content here’s is the working solution. I used AsciiMath Input as the input format in mathjax that incorporates ASCIIMathML.
In the base.html add the following scripts:

  MathJax = {
    loader: {load: ['input/asciimath', 'output/chtml']}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/startup.js"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">

and remember to enclose the dynamic text by back-ticks”, i.e., `…` So in the django-admin you can simply enter sqrt(50) as ` sqrt(50) ` or ` x^2 ` and the dynamic content which is passed from view to the template, in the template you surround {{e1}} by back-ticks

` {{ e1 }} `

instead of
{{ e1 }} where e1 is the dynamic content. So if e1 which was earlier displayed in plain text as 2*sqrt(2) will now be displyed as 2√2.

For more details: http://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-support


see https://docs.mathjax.org/en/latest/web/configuration.html. For the demo indicated here to work you should also add ['\(', '\)'] to inlineMath:

MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  svg: {
    fontCache: 'global'
<script type="text/javascript" id="MathJax-script" async

Leave a comment