client/server: render nested elements in headings

client/lib/render-markdown.tsx

@@ -8,40 +8,6 @@ delete defaultProps.theme
 
 const renderer = new marked.Renderer()
 
-const convertHtmlEntities = (str: string) => {
-    const quot = '"'
-    const apos = '''
-    const amp = '&'
-    const nbsp = ' '
-    const lt = '<'
-    const gt = '>'
-    const code = '<code>'
-    const endCode = '</code>'
-    const combinedRegex = new RegExp(`${code}|${endCode}|${quot}|${apos}|${amp}|${nbsp}|${lt}|${gt}`, 'g')
-
-    return str.replace(combinedRegex, (match) => {
-        switch (match) {
-            case quot:
-                return '"'
-            case apos:
-                return "'"
-            case amp:
-                return '&'
-            case nbsp:
-                return ' '
-            case lt:
-                return '<'
-            case gt:
-                return '>'
-            case code:
-            case endCode:
-                return '`'
-            default:
-                return match
-        }
-    })
-}
-
 renderer.heading = (text, level, _, slugger) => {
     const id = slugger.slug(text)
     const Component = `h${level}`
@@ -51,8 +17,7 @@ renderer.heading = (text, level, _, slugger) => {
     return renderToStaticMarkup(
         //@ts-ignore
         <Component>
-            <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
-                {convertHtmlEntities(text)}
+            <a href={`#${id}`} id={id} style={{ color: "inherit" }} dangerouslySetInnerHTML={{ __html: (text) }} >
             </a>
         </Component>
     )
@@ -70,7 +35,7 @@ renderer.heading = (text, level, _, slugger) => {
 
 //     // dirty hack
 //     // if text contains elements, render as html
-//     return `<a href='${href}' target="_blank" rel="noopener noreferrer">${convertHtmlEntities(text)}</a>`
+//     return <a href={href || ""} target="_blank" rel="noopener noreferrer" dangerouslySetInnerHTML={{ __html: convertHtmlEntities(text) }} ></a>
 // }
 
 

server/src/lib/render-markdown.tsx

@@ -8,40 +8,6 @@ delete defaultProps.theme
 
 const renderer = new marked.Renderer()
 
-const convertHtmlEntities = (str: string) => {
-    const quot = '"'
-    const apos = '''
-    const amp = '&'
-    const nbsp = ' '
-    const lt = '<'
-    const gt = '>'
-    const code = '<code>'
-    const endCode = '</code>'
-    const combinedRegex = new RegExp(`${code}|${endCode}|${quot}|${apos}|${amp}|${nbsp}|${lt}|${gt}`, 'g')
-
-    return str.replace(combinedRegex, (match) => {
-        switch (match) {
-            case quot:
-                return '"'
-            case apos:
-                return "'"
-            case amp:
-                return '&'
-            case nbsp:
-                return ' '
-            case lt:
-                return '<'
-            case gt:
-                return '>'
-            case code:
-            case endCode:
-                return '`'
-            default:
-                return match
-        }
-    })
-}
-
 renderer.heading = (text, level, _, slugger) => {
     const id = slugger.slug(text)
     const Component = `h${level}`
@@ -51,8 +17,7 @@ renderer.heading = (text, level, _, slugger) => {
     return renderToStaticMarkup(
         //@ts-ignore
         <Component>
-            <a href={`#${id}`} id={id} style={{ color: "inherit" }} >
-                {convertHtmlEntities(text)}
+            <a href={`#${id}`} id={id} style={{ color: "inherit" }} dangerouslySetInnerHTML={{ __html: (text) }} >
             </a>
         </Component>
     )
@@ -70,7 +35,7 @@ renderer.heading = (text, level, _, slugger) => {
 
 //     // dirty hack
 //     // if text contains elements, render as html
-//     return `<a href='${href}' target="_blank" rel="noopener noreferrer">${convertHtmlEntities(text)}</a>`
+//     return <a href={href || ""} target="_blank" rel="noopener noreferrer" dangerouslySetInnerHTML={{ __html: convertHtmlEntities(text) }} ></a>
 // }