Adding math/equation support for Markdown

[rodmarkun]

Hello! I have been trying to add equation support in this template's Markdown but I cannot get it to work properly well. I have followed what is stated in this blog post, but it does not seem to work. There are no errors, equations using $ simply do not take the appropiate format. I have never worked with Svelte before, am I missing something? Also, would be a great addition to have equation support by default, if possible. Thanks a lot for the template btw!

// import adapter from '@sveltejs/adapter-static';
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
import { mdsvex } from 'mdsvex';
import rehypeExternalLinks from 'rehype-external-links';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeKatexSvelte from 'rehype-katex-svelte';
import remarkMath from 'remark-math';

const extensions = ['.svelte', '.md'];

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter(),
        prerender: {
            handleHttpError: 'warn'
        }
    },
    preprocess: [
        vitePreprocess(),
        mdsvex({
            extensions: extensions,
            remarkPlugins: [remarkMath],
            rehypePlugins: [
                rehypeExternalLinks, 
                rehypeSlug,
                [
                    rehypeAutolinkHeadings,
                    {
                        behavior: 'prepend',
                        properties: { className: ['heading-link'], title: 'Permalink', ariaHidden: 'true' },
                        content: {
                            type: 'element',
                            tagName: 'span',
                            properties: {},
                            children: [{ type: 'text', value: '#' }]
                        }
                    }
                ],
                [rehypeKatexSvelte, { output: 'mathml' }]
            ]
        })
    ],
    extensions: extensions
};

export default config;

[matfantinel]

Hey there! Unfortunately I don't know much about how that works. Technically rehype plugins should work with MDsveX out of the box on this project... Have you tried disabling the other plugins to see if it's not conflicting with any of those?

[rodmarkun]

I tried disabling other plugins and did not work. However, I found a workaround (I don't know if this can be done in a simpler/more elegant way, but it works). The problem is that equations are not recognised and thus they are not wrapped in the correct classes of KaTeX CSS. I solved this creating a Katex.svelte component:

<!-- src/lib/components/atoms/Katex.svelte -->
<script lang="ts">
    import { onMount } from 'svelte';
    import katex from 'katex';

    export let expression: string = '';
    let container: HTMLElement;

    onMount(() => {
        if (expression && container) {
            try {
                katex.render(expression, container, {
                    throwOnError: false
                });
            } catch (error) {
                console.error('Failed to render KaTeX expression:', error);
                container.textContent = 'Failed to render LaTeX expression.';
            }
        }
    });
</script>

<span bind:this={container} style="display: inline;" />

Import this component into your markdown blog post file (same as with the Image component, for example), and use it whenever you want to render a formula:

Formula: <Katex expression="f(x) = w*x + b" />