💡 Add mathematical styling for governance action metadata

[Ryun1]

Area

Voting Pillar

Is there new design needed?

Yes

What?

• support rendering math notation
• See example https://gov.tools/governance_actions/941502b0aa104c850d197923259444d2b57cab7af18b63143775465aaacc84f5#0

Why?

• So that governance action metadata is able to be rendered properly

How?

See proposed method via https://x.com/Orbital_Lexicon/status/1890163207999746129

(Optional) User Story with acceptance criteria

No response

[Liberty-Chris]

Thank you @Ryun1

If it helps, I'll share the import methods here for both implementations.

---

Math is currently being rendered as raw text inside a <p> tag. Since it's enclosed in $$...$$, it should be processed using KaTeX or MathJax. This can be corrected with adding KaTeX (react-katex or katex.renderToString()) or enabling MathJax rendering (MathJax.typeset()). Otherwise, mathematic formulas will just display as raw text instead of properly formatted equations.

---

If React or another JavaScript framework, update code to process $$...$$ for block level math and $...$ for inline math with KaTeX like:

import { BlockMath } from 'react-katex';

<BlockMath>{'R_{\\text{epoch}} = M \\times (\\text{monetaryExpansion}) + T'}</BlockMath>

---

If vanilla JavaScript, manually call KaTeX:

  if (el.innerText.startsWith("$$") && el.innerText.endsWith("$$")) {
    el.innerHTML = katex.renderToString(el.innerText.slice(2, -2), { throwOnError: false });
  }
});

---

If MathJax is preferred, include this script in their frontend:

<script type="text/javascript" async
  src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Then trigger MathJax to process the page after loading:

MathJax.typeset();