Interactive LaTeX GUI / Rafflesia Part 3

In Part 1 of this series, I wrote about how I created a browser extension for Overleaf. In Part 2, I discussed how I integrated with the Overleaf editor. In keeping with the theme of large leaves, I called it Rafflesia for Overleaf.

When I first learned about LaTeX, I found its ability to write math equations was spectacular. Keep in mind that I was coming from a background of word processors like Microsoft Word and Google Docs which have a complex set of menus and dialogs to slowly piece together the content in a WYSIWYG manner.

Of course, that gets worse as the math grows more dense. At that point, I would spend more time on formula rendering than on the actual math. As I continued my education, I leveraged the equation rendering in Overleaf to create expressions that were beautiful in addition to being easy to write.

Rather, they generally have been easy. There definitely is a learning curve, as you need to memorize all the possible commands or use reference materials. I’ve used the TeX Stack Exchange forum many times for help.

So, as I built out this Chrome extension, I really wanted an integrated reference manual.

Building a Dataset

Starting out, I created an array of MathTopicEntry elements. Each contains a title, some search tags, and more.

The latex field contains the expression I need to present to the user. However, I also wanted to go a step further. Sometimes I haven’t just wanted to copy a line from another page, but render it myself to see how it looks. Sometimes I’ve wanted to play around with it.

Rendering LaTeX

I opted to use KaTeX as the rendering system for LaTeX expressions, promising fast results.

There’s a search box in my component. As users type, I look for all entries with the same tag. This shows a list of elements in the UI with a click listener for showResult. This will then show a catalog entry in the UI along with the KaTeX rendering of what you will see.

Playing with the options

Being able to see a fraction is nice, but it still didn’t feel flexible enough. I wanted more than just to see 1/2. I wanted to change the numerator and the denominator to those which would fit my use-case.

So what I did was replace the hardcoded values with placeholder strings. I added a params field to the MathTopicEntry interface to describe each item that could be modified.

Each param contains a description, a type, and an optional placeholder. For numbers, we can auto-generate a random integer when the catalog entry is displayed.

The latex field now has been updated with characters like $0, $1, etc. These can be replaced with the entry from that param before rendering the LaTeX expression.

Now the input fields that we’re generating can call the rerenderTemplate function every time they receive a change, mapping their value to the selectionParams member. We replace all the dollar sign values in our string before generating the HTML and updating it.

For these catalog examples, the performance is quite good! And since we are doing replacements in LaTeX, a user is able to add their own LaTeX expression if they have something more complicated in mind such as a fraction within a fraction.

Conclusion

LaTeX is great but hard to get into. I hope that with my Chrome extension the learning curve becomes a lot easier while taking advantage of everything it can offer.

The entire project’s code is on GitHub, so take a look if you’re interested. And you can install it for yourself.