Copy Link
Add to Bookmark
Report
How to render formulas
This is a small example of an HTML page rendering Latex equations with Katex on browser side.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Equations</title>
<link rel="stylesheet" href="./katex.css">
<script src="./katex.js"></script>
<script defer src="./auto-render.js"
onload="renderMathInElement(document.body);"></script>
<style>
/* optional - uncomment and customise next line to change maths font size
.katex { font-size: 1em !important; }
*/
</style>
</head>
<body>
Find $$\{ x, y, z \} \in \N$$ where:
$$x^2 + y^2 = z^2$$
\begin{equation}
\begin{split}
(a - b)^2 &= (a - b)(a - b) \\
&= a(a - b) - b(a - b) \\
&= a^2 -ab -ba + b^2 \\
&= a^2 + 2ab + b^2 \nonumber
\end{split}
\end{equation}
</body>
</html>This is the node.js version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Equations</title>
<link rel="stylesheet" href="./katex.css">
<script src="./katex.js"></script>
<style>
/* */
</style>
</head>
<body>
<?php
$mathExpression = "x^2 + y^2 = z^2";
?>
<!-- Use KaTeX to render dynamic content -->
<div id="renderedContent"></div>
<script>
// Get the dynamic content from PHP variable
var mathExpression = <?php echo json_encode($mathExpression); ?>;
// Render the content using KaTeX
katex.render(mathExpression, document.getElementById('renderedContent'));
</script>
</body>
</html>
