Enabling MathJax without using CMS

How do I enable MathJax? Adding a script tag with id=“MathJax-script” async src=“https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js” to the head section of my html works on my local machine, but it doesn’t work on Netlify. I’m not using a CMS. I’m deploying the site by dragging-and-dropping my complete site folder from my local machine into the Deploy area on my Netlify account.

Thanks for your patience while we play catch up after the holidays!

This should be possible. Do you have a link to your live site?

hey @novice -

this is what I see in your site with the developer pane open:

It should be possible to link a script in as you are trying to do and deploy with drag and drop.

I’m not sure, but it might be specific to this particular JS file - the error seems to suggest that there is a content policy in place, which sort of explains why it works locally but not on live? It’s a little confusing. I would probably research that error message and see if you can figure out what it means, exactly.

Have you tried loading in a different JS file?
What are you using the Mathjax for? is there a simpler way?

@perry - You were right: my own Content Security Policy (in my _headers file) was blocking mathjax. After some experimenting, I came up with what seems to be a minimally permissive Content Security Policy that works with mathjax. Here it is:

Content-Security-Policy: default-src ‘self’; script-src ‘self’ https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js; font-src ‘self’ https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/; style-src ‘self’ ‘unsafe-inline’

With this line in my _headers file, mathjax works fine. I’m still hoping to find a way to avoid including ‘unsafe-inline’ in style-src, but at least it’s working now. Thank you for pointing me in the right direction!

For anyone who’s interested, here’s a discussion about the ‘unsafe-inline’ issue:

1 Like

Glad it is working now, and thanks for sharing those resources!