React Markdown with-html not working

[pacocom]

React Markdown with-html not working for me

I use the code:

import React, { FunctionComponent, HTMLAttributes } from 'react';
import ReactMarkdown from 'react-markdown/with-html';
// @ts-ignore
import behead from 'remark-behead';

export interface MarkdownContentProps extends HTMLAttributes<HTMLDivElement> {
  source: string;
  beheadDepth?: number;
}
export const MarkdownContent: FunctionComponent<MarkdownContentProps> = ({
  source,
  beheadDepth = 2,
  ...extendedProp
}) => {
  return (
      <ReactMarkdown
        source={source}
        plugins={[[behead, { depth: beheadDepth }]]}
      />
  );
};

export const Example: FunctionComponent = () => {

  const doc = '<span style="color:red">text in red</span>';

  return <MarkdownContent className="doc" source={doc} />;
};

Result:

(Another Example: https://codesandbox.io/s/markdown-live-preview-react-code-challenge-forked-nwlh6)

import React from "react";
import ReactDOM from "react-dom";
import ReactMarkdown from "react-markdown/with-html";
import "./styles.css";

function App() {
  const markdown =
    "<span style='background:white;color:red;'>(4 digits for year, months from 01 to 12, days from 01 to 31)</span>";

  return <ReactMarkdown source={markdown} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Result:

What is the problems?
Thanks!

Environment

System:
OS: Windows 10 10.0.19041
CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.2 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 2.7.17 - /c/Python27/python
Browsers:
Edge: 44.19041.423.0
npmPackages:
gatsby: 2.23.3 => 2.23.3
gatsby-image: 2.4.7 => 2.4.7
gatsby-plugin-catch-links: 2.3.5 => 2.3.5
gatsby-plugin-manifest: 2.4.11 => 2.4.11
gatsby-plugin-meta-redirect: 1.1.1 => 1.1.1
gatsby-plugin-react-helmet: 3.3.4 => 3.3.4
gatsby-plugin-remove-serviceworker: 1.0.0 => 1.0.0
gatsby-plugin-sass: 2.3.4 => 2.3.4
gatsby-plugin-sharp: 2.6.11 => 2.6.11
gatsby-plugin-typescript: 2.4.6 => 2.4.6
gatsby-remark-autolink-headers: 2.3.5 => 2.3.5
gatsby-remark-copy-linked-files: 2.3.5 => 2.3.5
gatsby-remark-external-links: 0.0.4 => 0.0.4
gatsby-remark-images: 3.3.10 => 3.3.10
gatsby-remark-link-rewrite: 0.2.1 => 0.2.1
gatsby-remark-prismjs: 3.5.4 => 3.5.4
gatsby-remark-relative-images: 0.3.0 => 0.3.0
gatsby-remark-responsive-iframe: 2.4.5 => 2.4.5
gatsby-remark-smartypants: 2.3.4 => 2.3.4
gatsby-source-filesystem: 2.3.11 => 2.3.11
gatsby-transformer-json: 2.4.5 => 2.4.5
gatsby-transformer-remark: 2.8.15 => 2.8.15
gatsby-transformer-sharp: 2.5.5 => 2.5.5

[wooorm]

Invalid response:

Thanks for reaching out!

We require the template to be filled out on all new issues and pull requests. We do this so that we can be certain we have all the information we need to address your submission efficiently. This allows the maintainers to spend more time fixing bugs, implementing enhancements, and reviewing and merging pull requests.

Thanks for understanding and meeting us half way 😀

---

Duplicate response:

Thanks for taking the time to contribute!

We noticed that this is a duplicate of #460, #454, #427, and more. You may want to subscribe there for updates.

Because we treat our issues list as the project team’s backlog, we close duplicates to focus our work and not have to touch the same chunk of code for the same reason multiple times. This is also why we may mark something as duplicate that isn’t an exact duplicate but is closely related.

[jackieli123723]

add escapeHtml={false}