fix(code): inline code correctly displays html entities

Author: mlaursen

src/__tests__/Markdown.tsx

@@ -143,6 +143,19 @@ const CODE_SPAN_MARKDOWN = `
 This has some \`inline code\` to see.
 `;
 
+const CODE_SPAN_ADVANCED_MARKDOWN = `
+This has some \`inline code that "contains" html 'entities' and <other></other>\`
+
+Some other html entities:
+
+- \`¢\` cent
+- \`£\` pound
+- \`¥\` yen
+- \`€\` euro
+- \`©\` copyright
+- \`®\` registered trademark
+`;
+
 const UNORDERED_LIST_MARKDOWN = `
 - Item 1
 - Item 2
@@ -450,6 +463,17 @@ describe("Markdown", () => {
     expect(container).toMatchSnapshot();
   });
 
+  it("should be able to render inline code that has html entities", () => {
+    const { container } = render(
+      <Markdown markdown={CODE_SPAN_ADVANCED_MARKDOWN} />
+    );
+
+    expect(container.textContent).not.toMatch(
+      /&(quot|lt|gt|amp|cent|pound|yen|euro|copy|reg);/
+    );
+    expect(container).toMatchSnapshot();
+  });
+
   it("should be able to highlight code with the highlightCode option", () => {
     const getLanguage: GetCodeLanguage = (lang) => {
       lang = lang === "sh" ? "bash" : lang;

src/__tests__/__snapshots__/Markdown.tsx.snap

@@ -296,6 +296,60 @@ exports[`Markdown should be able to render inline code 1`] = `
 </div>
 `;
 
+exports[`Markdown should be able to render inline code that has html entities 1`] = `
+<div>
+  <p>
+    This has some 
+    <code>
+      inline code that "contains" html 'entities' and &lt;other&gt;&lt;/other&gt;
+    </code>
+  </p>
+   
+  <p>
+    Some other html entities:
+  </p>
+   
+  <ul>
+    <li>
+      <code>
+        ¢
+      </code>
+       cent
+    </li>
+    <li>
+      <code>
+        £
+      </code>
+       pound
+    </li>
+    <li>
+      <code>
+        ¥
+      </code>
+       yen
+    </li>
+    <li>
+      <code>
+        €
+      </code>
+       euro
+    </li>
+    <li>
+      <code>
+        ©
+      </code>
+       copyright
+    </li>
+    <li>
+      <code>
+        ®
+      </code>
+       registered trademark
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`Markdown should be able to render links that reference specific ids 1`] = `
 <div>
   <p>

src/renderers/tokens.tsx

@@ -120,7 +120,11 @@ export function TokenRenderer({
         </Code>
       );
     case "codespan":
-      return <Codespan {...token}>{token.text}</Codespan>;
+      return (
+        <Codespan {...token}>
+          {token.raw.substring(1, token.raw.length - 1)}
+        </Codespan>
+      );
     case "heading": {
       const { depth, ...props } = token;
       return (