MathJax is a JavaScript display engine for mathematics that works in all browsers. However, the Vapor Leaf and MathJax combination does not render math expressions correctly.
The example code for this issue is in the GitHub VaporExamplesLab/issue-vapor-leaf-mathjax repository. Also submitted vapor/leaf/issues/133.
vapor new issue-vapor-leaf-latex --web
cd issue-vapor-leaf-latex
vapor update -y
routes.swift (Add math
test route.)
// :ADD: math
router.get("math") { req -> Future<View> in
return try req.view().render("math")
}
Resources/Views/base.leaf (Add MathJax to existing base.leaf.)
<!DOCTYPE html>
<html>
<head>
<title>#get(title)</title>
<link rel="stylesheet" href="/styles/app.css">
</head>
<body>
#get(body)
<!-- MathJax: https://www.mathjax.org/#gettingstarted -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
</body>
</html>
Resources/Views/math.leaf (Added leaf file.)
#set("title") {Math Leaf Page}
#set("body") {
<p>Two equations: \(A^T_S = B\) and \(\sqrt{ab}\).</p>
<p>\[A^T_S = B\] </p>
<p>\[\sqrt{ab}\] </p>
}
#embed("base")
Public/MathExample.html (working example)
<!DOCTYPE html>
<html>
<head>
<title>MathExample</title>
</head>
<body>
<p>Two equations: \(A^T_S = B\) and \(\sqrt{ab}\).</p>
<p>\[A^T_S = B\] </p>
<p>\[\sqrt{ab}\] </p>
<!-- MathJax: https://www.mathjax.org/#gettingstarted -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
</body>
</html>
Resulting source as seen in browser:
\).</p>
<p>\[A^T_S = B\] </p>
<p>\[\sqrt{ab}\] </p>
}
<!DOCTYPE html>
<html>
<head>
<title>Math Leaf Page</title>
<link rel="stylesheet" href="/styles/app.css">
</head>
<body>
<p>Two equations: \(A^T_S = B\) and \(\sqrt{ab
<!-- MathJax -->
<!-- https://www.mathjax.org/#gettingstarted -->
<!-- config=TeX-MML-AM_CHTML (standard) | config=TeX-AMS_SVG (SVG)-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>
<!-- script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_SVG' async></script -->
</body>
</html>
- Vapor Framework version: 3.3.0
- Vapor Toolbox version: 3.1.10
- OS version: macOS High Sierra 10.13.6, Xcode 10.1, Swift 4.2