Published in

CodeX

Adding LaTeX Rendering to Our Website, Part 2

Deploying to Heroku

In case you aren’t using Netlify, you need to select a vendor to host the APIs. Many cloud vendors support both the PAAS and the FAAS models and we’re free to decide what approach to take to deploy our website. Because Netlify uses the FAAS solution, we demonstrate a PAAS solution. Heroku is used as the PAAS platform, though we use little of its features and therefore the code should work in any PAAS platform we choose.

Monorepo vs separate repos for APIs and Markup

We decided to use the repository that was used for the website for the API code as well. This has a clear disadvantage of pushing the needless markup code to Heroku and rebuilding the Heroku based APIs every time a markup-based document has changes. If this turns into a big problem, we can choose to have a separate branch for the API or a separate repository. We can also change our integration to happen via GitHub actions instead of the direct Heroku import where we can build the smartness to recognize whether the API has changed. We can move to manual deploys if the APIs aren’t changing frequently.

Creating shortcode to render LaTeX

With a functional API, the major work needed to get to rendering LaTeX on the website is done. We need to invoke it and then render the result. Now we need to create a shortcode to call the API and display the result in the Hugo based website.

{{/* layouts/shortcodes/latex.html */}} {{/* layouts/shortcodes/latex.html */}} {{/* defaults taken from http://docs.mathjax.org/en/latest/web/typeset.html   {{/*  a Boolean specifying whether the math is in display-mode or inline mode */ {{ $display := true }} ❶ {{ with .Get "display" }} {{$display = . }} {{ end }}   {{/*  a number giving the number of pixels in an em for the surrounding font. */ {{ $em := 8 }} {{ with .Get "em" }} {{$em = . }} {{ end }}     {{/*  a number giving the number of pixels in an em for the surrounding font. */ {{ $ex := 16 }} {{ with .Get "ex" }} {{$ex = . }} {{ end}}   {{/*  a number giving the width of the container, in pixels. */}} {{ $containerWidth := (mul 80$ex) }} {{ with .Get "containerWidth" }} {{ $containerWidth = . }} {{ end }} {{/* a number giving the line-breaking width in em units. Default is a very large number (100000), so effectively no line breaking. */}} {{$lineWidth := 100000 }} {{ with .Get "lineWidth" }}   {{ $lineWidth = . }} {{ end }} {{/* a number giving a scaling factor to apply to the resulting conversion. Default is 1. */}} {{$scale := 1 }} {{ with .Get "scale" }} {{ $scale = . }} {{ end }} {{ if (and$.Site.Params.Latex2Svg (getenv "LATEX2SVG_PASSWORD") ) }} ❷   {{ $json := getJSON$.Site.Params.Latex2Svg "?" (querify "tex" .Inner) "&password=" (getenv "LATEX2SVG_PASSWORD") "&display=" $display "&em="$em "&ex=" $ex "&containerWidth="$containerWidth "&lineWidth=" $lineWidth "&scale="$scale}}   {{ with \$json.data }}   {{. | safeHTML}} ❸ {{ end }} {{ end }}
# config/_default/params.yaml Latex2Svg: https://<endpoint>.herokuapp.com/latex2svg # or Latex2Svg: https://<endpoint>/.netlify/functions/latex2svg

Adding some LaTex in our website

With all the hard work done to get a shortcode to render latex, the next step is to write some LaTeX in our website. In our blog,we’ve a page on triangles.

<!-- content/blog/tropical triangles/index.md --> {{< latex>}}\text{Area} = \frac{b \times h}{2}{{</latex>}}
{{< latex>}} <!--  content/blog/community/curve.md --> \mathbf {B} (t)=\sum _{i=0}^{n}{n \choose i}(1-t)^{n-i}t^{i}\mathbf {P} _{i} {{</ latex>}}
<!--  content/blog/community/circle.md --> The area of a circle is {{<latex display="false">}} \pi r^2 {{</latex>}}

--

--

More from CodeX

Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Get the Medium app

Follow Manning Publications on Medium for free content and exclusive discounts.