[BlackFly]

Well I hope that you took efforts to avoid the other nasty side effect of client side rendering at least: page content jumping all over the place when the page reloads and the scrollbar not initializing at the right location (so cross page anchors are useless).

I personally solved that problem by stuffing the equation into a separate vue component and putting the katex compilation into the render function. Indeed, a dedicated equation HTML tag supporting latex (with what packages though?) would be nice. Getting the equation numbering to work nicely in an automatic fashion was a bit annoying though. I appreciate your comment on the page size, since I was considering moving to server side rendering via nuxt and hadn't made this consideration.

[joppy]

I've not used Vue, but how does this solve the problem? In most of my own sites, whatever preprocessor (eg markdown -> html) I use is instructed to replace mathematics with something like <span class="math">z = \frac{x}{y}</span>, then after the page has loaded a small loop runs KaTeX on all eligible spans. This results in some small amount of jumping, but I've found anchors to still work quite well.

[BlackFly]

Vue is an SPA framework, so it solves the problem by "rendering all the html" as actual preprocessing and then serving it to the browser which visually renders it, as opposed to the usual document.onLoad() approach where the base page gets loaded and then the javascript actually postprocesses this iteratively updating the DOM which triggers re-rendering events. I am not savvy to the precise details of vue and browser lifecycle events, but I think effectively it builds a shadow DOM and then triggers a single rendering event to avoid the jumping around. But yeah, a single rendering vs multiple renderings.

Getting the client javascript to render the entire page has a variety of problems, hence my desire to server side render (during a build step) what is essentially static content. If the page size bloats up too much though I might need to reconsider the approach...

I guess web components (https://developer.mozilla.org/en-US/docs/Web/Web_Components) could allow me to combine these approaches. It is already quite close to the vue programming model.