Merge pull request #4651 from alphagov/html-code-render

Output HTML in code preview without formatter
alphagov · Jan 18, 2024 · ced96cb · ced96cb
2 parents 39c0a23 + 9ce5db1
commit ced96cb
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 128 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/govuk-frontend-review/package.json b/packages/govuk-frontend-review/package.json
@@ -34,7 +34,6 @@
     "govuk-frontend": "*",
     "highlight.js": "^11.9.0",
     "iframe-resizer": "^4.3.9",
-    "js-beautify": "^1.14.11",
     "marked": "^11.1.1",
     "marked-linkify-it": "^3.1.8",
     "marked-smartypants": "^1.1.5",

diff --git a/packages/govuk-frontend-review/src/common/nunjucks/filters/highlight.mjs b/packages/govuk-frontend-review/src/common/nunjucks/filters/highlight.mjs
@@ -8,6 +8,5 @@ import hljs from 'highlight.js'
  * @returns {string} Code with syntax highlighting
  */
 export function highlight(code, language) {
-  return hljs.highlight(code.trim(), { language: language || 'plaintext' })
-    .value
+  return hljs.highlight(code, { language: language || 'plaintext' }).value
 }
diff --git a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs
@@ -1,5 +1,4 @@
 import { render } from '@govuk-frontend/lib/components'
-import beautify from 'js-beautify'
 
 /**
  * Component HTML code (formatted)
@@ -10,20 +9,7 @@ import beautify from 'js-beautify'
  * @returns {string} HTML rendered by the component
  */
 export function getHTMLCode(componentName, options) {
-  const html = render(componentName, { ...options, env: this.env })
-
-  // Default beautify options
-  const beautifyOptions = beautify.html.defaultOptions()
-
-  return beautify.html(html, {
-    indent_size: 2,
-    // Ensure nested labels in headings are indented properly
-    inline: beautifyOptions.inline.filter((tag) => !['label'].includes(tag)),
-    // Remove blank lines
-    max_preserve_newlines: 0,
-    // Ensure attribute wrapping in header SVG is preserved
-    wrap_attributes: 'preserve'
-  })
+  return render(componentName, { ...options, env: this.env })
 }
 
 /**

diff --git a/packages/govuk-frontend-review/src/views/macros/showExamples.njk b/packages/govuk-frontend-review/src/views/macros/showExamples.njk
@@ -41,7 +41,8 @@
         <h4 class="govuk-heading-s">Markup</h4>
         <pre class="app-code"><code tabindex="0" class="app-code__container hljs language-html">
           {{- getHTMLCode(componentName, {
-            context: example.options
+            context: example.options,
+            fixture: example
           }) | highlight("html") | safe -}}
         </code></pre>