Using latex formulas in astro using markdown and katex: How may I centered the formulas?

Question

I'm trying to create a blog with mathematical formulas in Latex using Astro, with posts in Markdown.

Following the instructions from this blog, I've created a minimal example project at this Github repository.

However, as you can see here the displayed formula

$$ \int_0^\infty = \frac{1}{x^2+1} \;dx=\frac{\pi}{2}  $$

is not centered as it should.

I've found that This problem is related to CSS. Indeed if I could apply a class to the paragraph containing the formula, I can fix it. Indeed the following work-around works:

$$ \int_0^\infty = \frac{1}{x^2+1} \;dx=\frac{\pi}{2}  $$

<style>
 p {
      text-align: center;  
    }
</style>

The problem is that doing so, would affect all the paragraphs on the page. And I cannot do something like

<span class="formula">
$$ \int_0^\infty = \frac{1}{x^2+1} \;dx=\frac{\pi}{2}  $$
</span>

since this breaks remark-math parsing!

Also, using the katex \htmlClass function does not work, since this acts in the children element of the paragraph, and not in the paragraph itself.

Answer 1

p {
  display: flex;
  justify-content: center;
}

This will center your element. Looking at the html, it looks like this because of how katex renders the html, but I have no idea. I just know I threw these two attributes on your p tag and worked.