`marked-highlight` is not outputting the correct value

[baseplate-admin]

Hi, Thanks for this awesome repo.

Disclaimer : So i have seen this issue before when i was trying to output a specific class with the marked.renderer.

Lets say i have this code :

    const marked = new Marked(
        // Highlight.js
        markedHighlight({
            langPrefix: "hljs language-",
            highlight: (code, lang) => {
                const language = hljs.getLanguage(lang) ? lang : "plaintext";
                const return_value = hljs.highlight(code, { language }).value;
                console.log(return_value);
                return return_value;
            }
        }),
        // Emoji plugin
        markedEmoji(emoji_options),
        {
            renderer,
            // Disable it as marked-mangle doesn't support typescript
            mangle: false,
            // We dont need github like header prefix
            headerIds: false
        }
    );

Given this input :

marked.parse(
  \`\`\`javascript
  console.log('hello');
  \`\`\`
)

while in console we get

<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;hello&#x27;</span>)

we get this as output :

Reproducible on : https://core-project-v3-ui-git-marked-tokitou-san.vercel.app/mal/1

Using :

• sveltejs 4.0.3
• sveltekit 1.22.3

[baseplate-admin]

Interestingly, If we use this code

   const renderer: markedType.RendererObject = {
        del(text: string) {
            /** Dont convert s (tag) -> del (tag)
             * Reason 1: Skeleton.dev is formatting `del` tag | Source : https://www.skeleton.dev/elements/typography
             * Reason 2: Marked.js is not allowing us to add unstyled class to rendered text.
             */

            return `<s class='unstyled'>${text}</s>`;
        }
    };

 const marked = new Marked(
        // Highlight.js
        markedHighlight({
            langPrefix: "hljs language-",
            highlight: (code, lang) => {
                const language = hljs.getLanguage(lang) ? lang : "plaintext";
                const return_value = hljs.highlight(code, { language }).value;
                console.log(return_value);
                return return_value;
            }
        }),
        // Emoji plugin
        markedEmoji(emoji_options),
        {
            renderer,
            // Disable it as marked-mangle doesn't support typescript
            mangle: false,
            // We dont need github like header prefix
            headerIds: false
        }
    );
    

Given this input :

marked.parse(`~~fdsa~~`)

We get this output :

What we should get is :

<s class='unstyled'>fdsa</s>

This sounds a issue with marked renderer

[UziTech]

It seems like something is removing the classes. I don't think anything in marked will do that. Does sveltekit do any sort of sanitization?

Can you recreate this without svelte?

[moonlitgrace]

@UziTech sorry for the late reply, @baseplate-admin is busy with studies lol, anyways back into topic...

Does sveltekit do any sort of sanitization?

Not sveltekit, but we've used xss for sanitization, it filters out attributes.
So basically the issue is with xss, even with whiteList option, xss is not returning in proper html structure.
Now using isomorphic-dompurify since xss has some issues with returning html entities.
Its working great, arigatō.