<font> element does not work

[PDmeaning]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

5.0.3 version

Link to runnable example

No response

Steps to reproduce

<ReactMarkdown
children={input}
plugins={[gfm]}
escapeHtml={false}
renderers={{ code: CodeBlock }}
/>
input="text",
but the output of html show as "text",
so the color cant show right

Expected behavior

the color of text is "#ff0000"

Actual behavior

the color of text is default(black)

Runtime

Node v16

Package manager

npm 8

OS

macOS

Build and bundle tools

Webpack

[wooorm]

Please use markdown, this question is not readable

[PDmeaning]

input: <font color=\"#ff0000\">text</font>;
output:<span><font color=\"#ff0000\"></span><span>text</span><span></span>

[wooorm]

Don‘t use font? It’s ancient and not supported by React? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font
facebook/react#2627.

[PDmeaning]

input:<span style="color:#ff0000">aaaaaaaaaaa</span>;
output:<span><span style="color:#ff0000"></span></span><span>aaaaaaaaaaa</span><span></span>

[PDmeaning]

input:<span style="color:#ff0000">aaaaaaaaaaa</span>;
output:<span><span style="color:#ff0000"></span></span><span>aaaaaaaaaaa</span><span></span>

but the span also render right, there are extra html elements;
input:<span style="color:#ff0000">text</span>;
output:<span><span style="color:#ff0000"></span></span><span>text</span><span></span>

[ChristianMurphy]

@PDmeaning I'm not sure what you are doing/using.
react-markdown and rehype-raw do not add extra spans.
runnable example of what react-markdown does: https://stackblitz.com/edit/github-tun7qz?file=src%2Fapp.tsx

source from sandbox

import React from 'react';
import Markdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';

const markdownSource = `
<span style="color:#ff0000">text</span>
`;

const App = () => (
  <Markdown rehypePlugins={[rehypeRaw]}>{markdownSource}</Markdown>
);

export default App;

If you have any follow up questions, please read the support guidelines on how to ask quality questions: https://github.com/remarkjs/.github/blob/main/support.md