Do nunjucks code highlighting using nunjucks

x-govuk · Dec 6, 2023 · cd5d7ed · cd5d7ed
1 parent 619c722
commit cd5d7ed
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/docs/components/_example.njk b/docs/components/_example.njk
@@ -3,7 +3,11 @@
 {% macro example(params) %}
 
 {%- set nunjucksHtml -%}
-<pre style="overflow: auto; background-color: #f3f2f1; padding: 10px 0;"><code>{{ getNunjucksCode(params.component) }}</code></pre>{% endset %}
+
+```js
+{{ getNunjucksCode(params.component) }}
+```
+{% endset %}
 
 {%- set outputHtml %}<iframe style="width: 100%; display: block; max-width: 100%; border: 0; background: white; height: 300px;" src="/examples/{{ params.component }}"></iframe><p class="govuk-body-s" style="border-top: 1px solid #b1b4b6; padding: 10px 20px;"><a href="/examples/{{ params.component }}" class="govuk-link" target="_blank">Open this example in a new tab</a></p>{%- endset %}
 

diff --git a/docs/eleventy.config.js b/docs/eleventy.config.js
@@ -1,8 +1,6 @@
 const govukEleventyPlugin = require('@x-govuk/govuk-eleventy-plugin')
 const fs = require('fs')
 const matter = require('gray-matter')
-const hljs = require('highlight.js/lib/core');
-hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
 
 module.exports = function(eleventyConfig) {
   // Register the plugin
@@ -42,13 +40,12 @@ module.exports = function(eleventyConfig) {
   })
 
   eleventyConfig.addNunjucksGlobal("getNunjucksCode", function(componentName) {
-    let data = matter(fs.readFileSync(`examples/${componentName}.njk`, 'utf-8')).content
+    let nunjucksCode = matter(fs.readFileSync(`examples/${componentName}.njk`, 'utf-8')).content
 
-    data = data.replace(/\{\%\sfrom\s[^\n]+\n\n/, '')
+    // Remove the `{% from "..." import ... %}` lines as those aren’t needed by users.
+    nunjucksCode = nunjucksCode.replace(/\{\%\sfrom\s[^\n]+\n\n/, '')
 
-    const highlightedCode = hljs.highlight(data, { language: 'js' }).value
-
-    return highlightedCode;
+    return nunjucksCode;
   })
 
   // Passthrough