Putting Mathematics & Science symbols on web pages in Nodejs There are many ‘tex software’ for performing mathematical and other scientific expression on web pages. But using Mathjax is recommended, as Mathjax is an open source javascript based software which can easily be adopted in Node js. We can directly make link from cdn with code in our web page but I always prefer to make a separate copy of mathjax in our server. To adopt mathjax in our nodejs server we have to first install mathjax with the npm(node package manager). We use mathjax3 as it has many advantages over mathjax v2. Rendering MathJax in Nodejs system, is not a simple client-side task. We have to follow few steps in our web app(server). We need to access npm first. After getting npm we could use it to install mathjax into node system. So, npm install mathjax@3 Note: Otherwise, in cPanel Nodejs setup we have to update the package.json file and add the following line inside dependencies key section like this: Package.json

{
  "name": "Render Math",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "express": "^4.17.1",
    ……………………………,
    …………………………..,
    "mathjax": "^3.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Then we have to run npm. This will install mathjax in node_modules folder in our base project. Now we got mathjax installed in our system. Now follow the following steps to render mathjax to our web pages from our nodejs server. 1.Configure mathjax in script tag within header section of the html page.

<html>
	<head>
	<meta name='viewport' content="width=device-width, initial-scale=1.0" charset="utf-8">
	<script>
		window.MathJax = {
			tex: {
				inlineMath: [['$', '$'], ['\\(', '\\)']]
			},
			svg: {
				fontCache: 'global'
			}
		};
	</script>
	</head>
</html>

2. Now load the mathjax with the code:

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

This is also inside section in the html file. Here ‘path’ is the path of the tex-chtml.js file which should be served by the Nodejs server. NOTE: When we installed the mathjax through npm, the working components of the mathjax are stored inside the mathjax/es5 directory. So, if we put all the components of mathjax/es5 directory into a base directory folder and name it as mathjax, the text-chtml.js file will be accessible from “/mathjax/tex-chtml.js” location. So, in this case the ‘path’ inside the second script tag should be replaced as “/mathjax”. Thus, now the src path should be “/mathjax/tex-chtml.js” 3. Up to this, the code required for rendering maths and other related symbols in our web page is like this:

<html>
	<head>
	<meta name='viewport' content="width=device-width, initial-scale=1.0" charset="utf-8">
	<script>
		window.MathJax = {
			tex: {
				inlineMath: [['$', '$'], ['\\(', '\\)']]
			},
			svg: {
				fontCache: 'global'
			}
		};
	</script>
	<script type="text/javascript" scr="/mathjax/tex-chtml.js" id="MathJax-script" async></script>
	</head>
</html>

The above code is required to render mathjax from the own copy of mathjax from the server. It is now the task of the server/web app to serve the mathjax files to the webpages. So, we require the following code in the Nodejs web app:

app.get('/mathjax*', (req, resp)=>{
	var path = req.url;
	if(fs.existsSync(__dirname+path)){
		fs.readFile(__dirname + path, function(err, data){
			if(err){
				resp.writeHead(404);
				resp.write(err);
				resp.end();
			}else{
				//logger.debug('caught..echo');
			resp.writeHead(200, {
				'Content-Type': 'text/javascript'
			});
			resp.write(data);
			resp.end();
			}
		});
	}else resp.end('Not found');
});

NOTE: It is worthy to mention that all the concerned nodejs components are kept inside the /mathjax directory inside base directory. Also, we used a wildcard character (*) after ‘/mathjax’. So, we could access the tex-chtml.js and any other component file from this url path. Now restart Nodejs and put some mathematical expression like \$x^3 + y^3\$ inside anywhere in the web content. This appear as $x^3+y^3$. It is important that every expression which contain mathematics or such symbols should be written inside two ‘$’ characters or should be preceded by “\$“ and followed by “\$” characters. All of static contents containing mathematical expressions will be displayed by now. To render mathematical expressions for dynamic web pages we have to use mathjax typesets. There two types of mathjax typesets – synchronous and asynchronous. For the synchronous way, we have to use MathJax.typeset(). It will tell mathjax to look for mathematics in the page for any unprocessed mathematical expressions and then typeset it. For the asynchronous way we have to use MathJax.typesetPromise(); The following code snippet should be followed:

function doMathJax(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);
}

Function doMathJax will render mathematical expressions inside the variable ‘s’ to the html element ‘div’. We can do it also as following:

MathJax.typesetPromise().then()=>{
	//modify the DOM here.
	MathJax.typesetPromise();
}).catch((err)=> console.log(err.message));