mathjax in django

[Johan Antonissen]

Ho there!

I'm trying to get some auto generated latex code from sympy to be displayed on my django webpage but I can't seem to get it to work.

This is my code at the top of the page:

{% block jstop %}

<script type="text/javascript" src="{% static 'konva/konva.js' %}"></script>

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mat...@3.0.1/es5/tex-mml-chtml.js"></script>

<!-- <script type="text/javascript" src="{% static 'model/math.js' %}"></script> -->

{% endblock jstop %}

This is the code at the bottom of my page:

{% block jsbot %}

<script type="text/javascript" src="{% static 'model/clicker.js' %}"></script>

<script type="text/javascript" src="{% static 'model/grapher.js' %}" canvas="shapeCanvas"></script>

{% endblock jsbot %}

Then i have a div with id point-loads:

<div id="point-loads" class="math">

</div>

and a piece of code that imports the latex:

function updateWebsite(api_data) {

// @note update website

// remove hidden container solutionCard

// Select the element with the id "solutionCard"

const solutionCard = document.getElementById('solutionCard');

// Remove the 'hidden' attribute

solutionCard.removeAttribute('hidden');

// if data.point_loads is not empty

if (api_data.point_loads !== null) {

// for each line_N in data.point_loads get latex code and insert in solutionBody id using mathjax

let pointLoads = document.getElementById('point-loads');

// empty solutionBody

pointLoads.innerHTML == '';

pointLoads.innerHTML += '\[ ';

for (let i = 0; i < Object.keys(api_data.point_loads).length; i++) {

let line = 'line_' + i;

let latex = api_data.point_loads[line];

pointLoads.innerHTML += latex +' \n';

}

pointLoads.innerHTML += ' \]';

}

};

However when I run the page i just get regular text on my page:

[ \begin{table} \caption{Point loads} \label{F-loads} \begin{tabular}{|c|c|c|} \toprule \midrule $F_{x0}$ & {:0,2f} & N \\ $F_{y0}$ & {:0,2f} & N \\ \bottomrule \end{tabular} \end{table} ]

Does anyone have an idea whats going wrong ?

Thank you in advance

Johan

[Murray]

Hello Johan

Since you're loading LaTeX after your page load, you need to make use of the concepts in this page: https://docs.mathjax.org/en/latest/advanced/typeset.html

I would suggest trying to add MathJax.typesetPromise() just after your closing escaped bracket is added to the DIV. I mean here:

pointLoads.innerHTML += ' \]';
MathJax.typesetPromise();

The regular text you've quoted only has opening [ and closing ] brackets (not escaped, like \[ and \] which is what MathJax requires. If the above still doesn't work, try double-backslashes.

BTW (1) : I think you mean a single = sign for this line: 

pointLoads.innerHTML == '';

BTW (2): There can be security issue when using innerHTML (see https://stackoverflow.com/questions/48517469/security-innerhtml-vs-textcontent-with-api). Given there is no actual HTML in your LaTeX string (and there never will be), it is probably better to use textContent, so it would be:

        pointLoads. textContent = '';
        pointLoads. textContent  += '\[ ';

        for (let i = 0; i < Object.keys(api_data.point_loads).length; i++) {
            let line = 'line_' + i;
            let latex = api_data.point_loads[line];

            pointLoads. textContent  += latex +' \n';
        }
        pointLoads. textContent  += ' \]';

        MathJax.typesetPromise();

Hope it helps

Regards

Murray