To render math & science symbols in web pages backed by php servers we need to take the following steps: For static web pages (using MathJax-3x Library): 1. Download the MathJax-3.1 javascript library in your system. 2. Extract the zip file and go to MathJax3/ES5 folder; copy the tex-chtml.js; paste or put the file in a new folder(name it mathjax) inside the document root of the project.. 3. in the header section of the html file mention the source of mathjax library inside the script tag.

<script type="text/javascript" src="/mathjax/tex-chtml.js" id="MathJax-script" async></script>

Here I put the relative path of the MathJax library as I used a local copy of MathJax library in my server root. 4. Cofigure the MathJax inside thescript tag in the header section of the html file.

<script>
	window.MathJax = {
		tex: {
			inlineMath: [['$', '$'], ['\\(', '\\)']]
		},
		svg: {
			fontCache: 'global'
		}
	};
</script>

5. Now put the latex code enclosed with two ‘$’ signs inside anywhere in the body section of the html file; the math & science symbols will be displayed in our web page.

<body>
	<h3> This is a test $x^5 + y^6$ ; display</h3>
</body>

The required code instance is shown below:

<!DOCTYPE html>
<html> 
	<head> 
		<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset='utf-8'>
            <title>Sample Page</title>
	<script>
		window.MathJax = {
			tex: {
				inlineMath: [['$', '$'], ['\\(', '\\)']]
			},
			svg: {
				fontCache: 'global'
			}
		};
	</script>
	<script type="text/javascript" src="/mathjax/tex-chtml.js" id="MathJax-script" async></script>	
</head>
<body>
	<div class='newclass' style="background-color:#bbb">
            <h1 style="font-size: 50px;">Test Page</h1>
        </div>
        <div >
            <h2 style="left: 25%; position: relative; font-size: 30px;">Test Math Symbols</h2>
        </div>
		<h3> This is a test $x^5 + y^6$ ; display</h3>
</body>
</html>

FOR DYNAMIC WEB PAGES To display maths & related symbols dynamically on the web pages, further take the following steps: 6. Typeset the latex code in the following way:

function putMathSymbols(div,s){
	const done = document.createElement('span');
	done.textContent = '';
	const syncTypeset = div;
	syncTypeset.innerHTML = s;
	setTimeout(async ()=>{
		await MathJax.typesetPromise();
		syncTypeset.appendChild(done.cloneNode());
	},1000) 
	done.textContent = 'done';
}

In the above code the latex expressions stored in variable s will be typeset(ed) in the ‘div’ variable. Both variable ‘div’ & ‘s’ have been passed to the function putMathSymbols(). Now, below is the full test example to display math symbols dynamically in the web pages backed by a php server.

Put the test.html file in the document root of your php server(apache server) and also put the MathJax3 mathjax folder(recently created) in the document root of your php server. Now from you browser address bar type localhost/try.html, put different latex expressions in the textarea, press the ‘Try it’ button and see the magic.

If we use Node js as our back end web engine we have to take a small different trick..