Show HTML in Markdown code block correctly

matteason · matteason · commit 1376ca1d19ca · 2023-08-19T17:46:40.000+01:00
diff --git a/components/GvdOptions.vue b/components/GvdOptions.vue
@@ -38,7 +38,9 @@ function convertMarkdown(str: String) {
     return;
   }
 
-  let output = str.replace(/`(?<code>.+?)`/g, '<code class="gvd-code-inline">$<code></code>')
+  let output = str.replace(/`(?<code>.+?)`/g, (match, code) => {
+    return `<code class="gvd-code-inline">${code.replaceAll('<', '&lt;', '>', '&gt;')}</code>`
+  })
   output = output.replace(/\[(?<linkText>.+)\]\((?<url>.+)\)/ig, '<a href="$<url>" class="govuk-link">$<linkText></a>')
 
   return output

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,9 @@ function convertMarkdown(str: String) {`
`38`	`38`	`return;`
`39`	`39`	`}`
`40`	`40`
`41`		- let output = str.replace(/`(?<code>.+?)`/g, '<code class="gvd-code-inline">$<code></code>')
	`41`	+ let output = str.replace(/`(?<code>.+?)`/g, (match, code) => {
	`42`	+ return `<code class="gvd-code-inline">${code.replaceAll('<', '<', '>', '>')}</code>`
	`43`	`+ })`
`42`	`44`	`output = output.replace(/\[(?<linkText>.+)\]\((?<url>.+)\)/ig, '<a href="$<url>" class="govuk-link">$<linkText></a>')`
`43`	`45`
`44`	`46`	`return output`