Web-Projects
/
blog-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make small fixes to math rendering code.

This commit is contained in:
Danila Fedorin 2020-07-19 14:09:24 -07:00
parent 65645346a2
commit 12aedfce92
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
content/blog/backend_math_rendering.md
View File

@ -42,9 +42,9 @@ like mine, to render math on the backend.
I settled on the following architecture: I settled on the following architecture:
* As before I would generate my pages using Hugo. * As before, I would generate my pages using Hugo.
* I would use the KaTeX NPM package to rendering math. * I would use the KaTeX NPM package to render math.
* To build the website no matter what computer I was on, I would use Nix. * To build the website no matter what system I was on, I would use Nix.
It so happens that Nix isn't really required for using my approach in general. It so happens that Nix isn't really required for using my approach in general.
I will give my setup here, but feel free to skip ahead. I will give my setup here, but feel free to skip ahead.
@ -119,9 +119,12 @@ which replaced mathematical expressions in a page with their SVG forms.
This is still the case, in both MathJax and KaTeX. The ability This is still the case, in both MathJax and KaTeX. The ability
to render math in one step is the main selling point of front-end LaTeX renderers: to render math in one step is the main selling point of front-end LaTeX renderers:
all you have to do is drop in a file from a CDN, and voila, you have your all you have to do is drop in a file from a CDN, and voila, you have your
math. There are no such easy answers for back-end rendering. math. There are no such easy answers for back-end rendering. I decided
to write my own Ruby script to get the job done. From this script, I
would call the `katex` command-line program, which would perform
the heavy lifting of rendering the mathematics.
So what _do_ I do? Well, there are two types on my website: inline math and display math. There are two types of math on my website: inline math and display math.
On the command line ([here are the docs](https://katex.org/docs/cli.html)), On the command line ([here are the docs](https://katex.org/docs/cli.html)),
the distinction is made using the `--display-mode` argument. So, the general algorithm the distinction is made using the `--display-mode` argument. So, the general algorithm
is to replace the code inside the `$$...$$` with their display-rendered version, is to replace the code inside the `$$...$$` with their display-rendered version,
@ -167,7 +170,7 @@ end
There's a bit of a trick to the final layer of this script. We want to be There's a bit of a trick to the final layer of this script. We want to be
really careful about where we replace LaTeX, and where we don't. In really careful about where we replace LaTeX, and where we don't. In
particular, we _don't_ want to go into the `code` tags. Otherwise, particular, we _don't_ want to go into the `code` tags. Otherwise,
it wouldn't be able to talk about LaTeX code! Thus, we can't just it wouldn't be possible to talk about LaTeX code! Thus, we can't just
search-and-replace over the entire HTML document; we need to be context search-and-replace over the entire HTML document; we need to be context
aware. This is where `nokigiri` comes in. We parse the HTML, and iterate aware. This is where `nokigiri` comes in. We parse the HTML, and iterate
over all of the 'text' nodes, calling `perform_katex_sub` on all over all of the 'text' nodes, calling `perform_katex_sub` on all
@ -198,7 +201,7 @@ We write:
* `//`, starting to search for nodes everywhere, not just the root of the document. * `//`, starting to search for nodes everywhere, not just the root of the document.
* `*`, to match _any_ node. We want to replace math inside of `div`s, `span`s, `nav`s, * `*`, to match _any_ node. We want to replace math inside of `div`s, `span`s, `nav`s,
all of the `h`s, and so on. all of the `h`s, and so on.
* `[not(self::code)]` cutting out all the `code` tags. * `[not(self::code)]`, cutting out all the `code` tags.
* `/`, now selecting the nodes that are immediate descendants of the nodes we've selected. * `/`, now selecting the nodes that are immediate descendants of the nodes we've selected.
* `text()`, giving us the text contents of all the nodes we've selected. * `text()`, giving us the text contents of all the nodes we've selected.