# Beautiful Math Symbols

DevFeed: [Beautiful Math Symbols](<https://devfeed.tech/articles/beautiful-math-symbols-20004.md>)

Original publisher: [Read original article](<http://engineering.hackerearth.com/2016/02/02/latex-support-using-MathJax/>)

Published: 2016-02-02T00:00:00Z

Content type: article

Language: en

Sources: [HackerEarth](<https://devfeed.tech/sources/hackerearth.md>)

Topics: [math](<https://devfeed.tech/topics/math.md>), [Library](<https://devfeed.tech/topics/library.md>), [Markdown](<https://devfeed.tech/topics/markdown.md>), [Ajax](<https://devfeed.tech/topics/ajax.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Code](<https://devfeed.tech/topics/code.md>), [Programming](<https://devfeed.tech/topics/programming.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [library](<https://devfeed.tech/tags/library.md>), [markdown](<https://devfeed.tech/tags/markdown.md>), [math](<https://devfeed.tech/tags/math.md>), [programming](<https://devfeed.tech/tags/programming.md>)

## AI overview

The article explains how HackerEarth added LaTeX rendering with MathJax for mathematical symbols in programming-puzzle content. It describes handling editor previews, synchronous page content, and dynamically loaded Ajax content, using Markdown processing hooks and MathJax's asynchronous queue.

## Source excerpt

Introduction: By nature HackerEarth has so many programming puzzles. These puzzles bound to have mathematical equations, statements and symbols. Problem Setters often requested us to add support for Latex. Implementation: The obvious and easy solution for this is to implement Latex support for individual pages. But that's not scalable and maintainable. Then we came with up with a solution where we didn't have to write custom code for every page. We examined the site and figured out three type of rendering that happens in the browser. Before going to solutions case by case, let's first understand how MathJax, the library we use for typesetting Latex, works. Everything in MathJax works asynchronously. After initializing MathJax, it executes a set of tasks and then typesets the queued content. Everything in MathJax works asynchronously using queues. Mathjax docs explains it in detail. Types of rendering: Rendering of preview section in editor Static content rendering (synchronous) Rendering of dynamic content via Ajax (Asynchronous) Read through rest of the article for this categorization to make sense. Editor: We use pagedown editor throughout our site. It has a preview section which displays the converted markdown content. Now this should also display typesetted Latex content. Pagedown editor has feature called hooks. This is a mechanism for plugging external text processors in between various steps of markdown processing. We have written a hook for typesetting Latex macros. This is chained to the hooks at the end, after all the markdown processing is completed. This hook takes markdown processed content as input and spits out Latex typesetted content. function renderLatex(text) { var invisible_div = document.createElement("div"); invisible_div.style.cssText = "display:hidden"; attr = document.createAttribute("id"); attr.value = "mathjax_text"; invisible_div.setAttributeNode(attr); invisible_div.innerHTML = text; document.body.appendChild(invisible_div); elem = docum