Why not use micromark and innerHtml?

[snnsnn]

Hi, I was wondering if there is any particular reason for why you go with this particular implementation. I have a simpler implementation using micromark but not sure if I am missing anything. By the way, it appears innerHTML is safe against script injection.

import { micromark, Options } from 'micromark';
import { gfm, gfmHtml } from 'micromark-extension-gfm'
import { Component } from "solid-js";

export const Markdown: Component<{
  text: string;
  options?: Options,
}> = ({ text, options = {} }) => {
  return (
    <div innerHTML={micromark(text, { extensions: [gfm()], htmlExtensions: [gfmHtml()], ...options })} />
  );
}

Edit: It appears micromark escapes the <script> element, otherwise <div innerHTML={text}/> is still dangerous.

[andi23rosca]

I don't think you're missing anything, I just kept this library as similar as possible to react-markdown so that people coming from there can use something familiar :D

[snnsnn]

OK, thanks. By the way doc says innerHtml is not safe. I am posting it here for reference. Maybe it was my browser that prevented it.

https://www.solidjs.com/docs/latest#innerhtml%2Ftextcontent Be careful!! Setting innerHTML with any data that could be exposed to an end user as it could be a vector for malicious attack. textContent while generally not needed is actually a performance optimization when you know the children will only be text as it bypasses the generic diffing routine.