Incorrect inline style for katex

[ailectra]

Hi,

When using remark-math and rehype-katex, there is a display issue. It shows the image on the right instead of the one on the left:

The one on the left is displayed using katex.renderToString() directly, the one on the right uses SolidMarkdown.

The issue seems to be because the style properties are camelCase instead of kebab-case:

{
  className: 'mord mathnormal',
  style: { marginRight: '0.07153em' },
  key: 'span---0'
}

[andi23rosca]

yep, you're right, solid uses kebab case style properties PRs are welcome, otherwise I'll try to get to fixing it in the weekend

[ailectra]

Adding the following code to childProps from MarkdownNode in renderer.tsx seems to fix it:

if (properties.style) {
    properties.style = Object.entries(properties.style).reduce((acc, [key, value]) => {
        const kebabKey = key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
        acc[kebabKey] = value
        return acc
    }, {} as Record<string, string>)
}

Also, maybe also changing className to class can prevent future problems:

if (properties.className) {
    properties.class = properties.className;
    delete properties.className;
}

[ailectra]

Ok I checked your code. The issue seems to stem from the parseStyle function in utils.ts. The style is already in kebab-case but gets turned into camelCase by this function. Removing this function entirely fixes the problem.

As for the className property, it should be changed in the addProperty function like this:

if (info.property === "className") {
    info.property = 'class'
}

[andi23rosca]

@ailectra just published v2.0.1 let me know if it fixed all your issues

[ailectra]

Yes it works perfectly now! Thank you