fix(html): correctly render escaped html

Author: mlaursen

src/__tests__/Markdown.tsx

@@ -121,6 +121,14 @@ Here is some \\*escaped\\* stuff.
 Allow \\_\\_tests\\_\\_.
 `;
 
+const ESCAPED_HTML_MARKDOWN = `
+- \\<img>
+- \\<video>
+- \\<iframe>
+- \\<embed>
+- \\<object>
+`;
+
 const BR_MARKDOWN = `
 Trailing two spaces to force break  
 Second Line of text with trailing slash to force break\\
@@ -426,6 +434,14 @@ describe("Markdown", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("should be able to render escaped (backslash-prefixed) html", () => {
+    const { container } = render(<Markdown markdown={ESCAPED_HTML_MARKDOWN} />);
+    const firstLi = document.querySelector("li");
+    expect(firstLi?.innerHTML).toBe("&lt;img&gt;");
+
+    expect(container).toMatchSnapshot();
+  });
+
   it("should be able to render breaks (<br>)", () => {
     const { container } = render(<Markdown markdown={BR_MARKDOWN} />);
 

src/__tests__/__snapshots__/Markdown.tsx.snap

@@ -201,6 +201,34 @@ exports[`Markdown should be able to render emphasis (italic) text 1`] = `
 </div>
 `;
 
+exports[`Markdown should be able to render escaped (backslash-prefixed) html 1`] = `
+<div>
+   
+  <ul>
+    <li>
+      &lt;
+      img&gt;
+    </li>
+    <li>
+      &lt;
+      video&gt;
+    </li>
+    <li>
+      &lt;
+      iframe&gt;
+    </li>
+    <li>
+      &lt;
+      embed&gt;
+    </li>
+    <li>
+      &lt;
+      object&gt;
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`Markdown should be able to render escaped (backslash-prefixed) text 1`] = `
 <div>
    

src/renderers/html.tsx

@@ -36,6 +36,10 @@ export type EscapeRendererProps = marked.Tokens.Escape;
  * ```
  */
 export function EscapeRenderer({ text }: EscapeRendererProps): ReactElement {
+  if (text === "<") {
+    return <>&lt;</>;
+  }
+
   return <>{text}</>;
 }