Trying out maths rendering via markdown.

This is an inline equation: , followed by a display style equation after lots more lines of paragraph to test vertical alignment of inline expressions as well as the standalone expressions. Here is also some styled text.

This is another inline expression followed by a normal expression, which align to the middle of the content:

Area of a triangle:

This is the configuration I have to enable this:

1
import { defineConfig } from 'astro';
2
import remarkMath from 'remark-math';
3
import rehypeMathJax from 'rehype-mathjax';
4

5
export default defineConfig({
6
    site: 'https://www.lloydatkinson.net/',
7
    markdown: {
8
        remarkPlugins: [remarkMath],
9
    },
10
    integrations: {
11
        mdx({
12
            rehypePlugins: [
13
                [rehypeMathJax],
14
            ],
15
        }),
16
    },
17
});

Finally, I apply the following styling which I import into Layout.astro.

1
mjx-container svg {
2
    display: inline;
3
}
4

5
.MathJax {
6
    font-size: 1.1rem;
7
    color: black;
8
}