How to use the MathJax extension?

[nathan-hello]

I have the following for rendering my markdown to html

func MarkdownRender(md []byte) []byte {

        
	extensions := parser.CommonExtensions | parser.AutoHeadingIDs | parser.NoEmptyLineBeforeBlock | parser.MathJax
	p := parser.NewWithExtensions(extensions)
        
	doc := p.Parse(md)

	opts := mdhtml.RendererOptions{
		Flags:          mdhtml.CommonFlags,
		RenderNodeHook: mdCodeHighlighter,
	}
	renderer := mdhtml.NewRenderer(opts)

	return markdown.Render(doc, renderer)
}

And in a markdown file i have a simple

$X$

This get transformed into

<span class="math inline">\(X\)</span>

I don't see where I'm supposed to get these two classes. And even with those two classes, shouldn't there be a bunch more css and even some images? I'm just really confused on how to get this to render properly. Any help would be appreciated.

[kensanata]

I think you need to add MathJax to your web server and to the HTML template that also contains your generated HTML.

Specifically, add something like this to your HTML file:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

There are many more ways to configure MathJax. You just have to make sure that it works with the markup you're generating: \(X\) is the default for inline math so in theory no configuration is necessary.

[nathan-hello]

Hey, thanks! I appreciate the help. I actually already had this figured out, so I can close the issue but I think it would be helpful for the gomarkdown docs to specify that this is something you have to do yourself.

I came from astro, which had a katex math plugin, which rendered my markdown -> mathjax -> full html+css by itself and it was really confusing on how to get this to do the same thing. The answer was a little bit of js, but eventually I would like to have this be server rendered like it was on astro.

Either way, here's my rendering function and the necessary javascript

func MarkdownRender(md []byte) []byte {

	extensions := parser.CommonExtensions | parser.AutoHeadingIDs | parser.NoEmptyLineBeforeBlock | parser.MathJax 
	p := parser.NewWithExtensions(extensions)

	doc := p.Parse(md)

	opts := mdhtml.RendererOptions{
		Flags:          mdhtml.CommonFlags,
		RenderNodeHook: mdRenderHooks,
	}
	renderer := mdhtml.NewRenderer(opts)

	return markdown.Render(doc, renderer)
}

And then that gives me all of the elements with the math classes, and then I have this js/css to render it

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-zh0CIslj+VczCZtlzBcjt5ppRcsAmDnRem7ESsYwWwg3m/OaJ2l4x7YBZl9Kxxib" crossorigin="anonymous">
        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-Rma6DA2IPUwhNxmrB/7S3Tno0YY7sFu9WSYMCuulLhIqYSGZ2gKCJWIqhBWqMQfh" crossorigin="anonymous"></script>
        <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-hCXGrW6PitJEwbkoStFjeJxv+fSOOQKOPbJxSfM6G5sWZjAyWhXiTIIAmQqnlLlh" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

Again, some kind of tutorial for how to server render these things would be immensely helpful! I use this for my blog site and it's really unnecessary to require everyone to download js when I could have server rendered it.

Any maintainers feel free to close this issue, but I would like to keep it open until there's some happy path in the documentation on how to actually use the extension.