Display LaTeX on your TYPO3 page
Get started
In this guide, you will learn how to display LaTeX formulas on your TYPO3 site. The guide is divided into three parts, which briefly involve:
- Uploading a configuration file to the File List
- Inserting a specific HTML element on the pages where you want to display your LaTeX formulas
- Adding one or more HTML elements with your LaTeX code on the relevant page
Note: As you work through the guide, make sure to adjust the web addresses to match your website, not those in the guide.
$a^2+b^2=c^2$
\[ \sum_{k=1}^n\left.\frac{1}{k!}\frac{d^k}{dt^k}\right|_{t=0}f(u(t)) + \int_0^1 \frac{(1-t)^n }{n!} \frac{d^{n+1}}{dt^{n+1}} f(u(t))\, dt. \]
\[ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} \]
\[ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} \]
1. Upload configuration file to the file list
Steps 1-6 only need to be performed once:
- Right click on this link, and save the file as "mathjax_local.js" on your PC by right-clicking and selecting 'Save link as'. (You can choose to give the file a different name, but in this guide, it is called mathjax_local.js.)
- Upload the file (mathjax_local.js) to the File List in TYPO3.
- Ensure that you have 'Extended view' enabled at the bottom of your file list.
- Open the file in your browser via the File List and copy the path of the file (in this case, the path is https://typo3.au.dk/fileadmin/uploads/mathjax_local.js).
- You can now edit the file in TYPO3's File List. Click 'Edit content' and paste the correct path of the file that you found above (step 1.4). Click 'Save'. The file will close automatically. Note that there are two images for this step.
- If you reopen the file via the File List (Reload or Ctrl+F5 the displayed page), the new correct path will be shown.
Note: Be sure to adjust the URLs to match your website, not the guide’s.
![[Translate to English:] Højre-klik og gem filen på din pc.](/fileadmin/_processed_/b/1/csm_MathJax-1-1_09d6662f7b.png "[Translate to English:] Højre-klik og gem filen på din pc.")
![[Translate to English:] Slå Udvidet visning til. Vis filen i frontend, hvor du kopierer stien. Rediger indhold og indsæt filens sti.](/fileadmin/_processed_/4/e/csm_MathJax-1-2345_dc76652203.png "[Translate to English:] Slå Udvidet visning til. Vis filen i frontend, hvor du kopierer stien. Rediger indhold og indsæt filens sti.")
![[Translate to English:] Indsæt filens sti og klik Gem](/fileadmin/_processed_/d/7/csm_MathJax-1-5_2d6034786e.png "[Translate to English:] Indsæt filens sti og klik Gem")
![[Translate to English:] Du kan Reloade filens visning i frontend. Tjek at filens url i indholdet matcher url'en i browseren.](/fileadmin/_processed_/b/8/csm_MathJax-1-6_9524cada49.png "[Translate to English:] Du kan Reloade filens visning i frontend. Tjek at filens url i indholdet matcher url'en i browseren.")
2. Insert an HTML element on each page where LaTeX should be displayed
Repeat this step on each page where you want to display LaTeX formulas:
- Insert an HTML element on the TYPO3 pages where you want LaTeX/mathematics interpretation. The element should be placed early/at the top of the page. It is not visible on the frontend. Your HTML element should contain the code below, which you can copy and paste. But REMEMBER to update the code to reference the path you found in step 1.4 above.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML,https://typo3.au.dk/fileadmin/uploads/mathjax_local.js"></script> - If you need MathJax on many pages, you can contact your websupport and ask them to add this code to the domain’s template.
3. Insert text elements with your LaTeX code
This step can be repeated as many times as you need formulas:
- You can now insert as many text elements with LaTeX code as you like. You can place them in containers (grids) to arrange them neatly next to each other or one below the other.
LaTeX in news and events?
You can insert mathematical expressions into news and events. You need to perform step 2 above on your single-view page for news and on your single-view page for events (and their translated pages). This is where you have a news plugin with News System: Detail View. Afterward, you insert the LaTeX code into the news text editor.