From 9d8c7bf40e7540c43027d9556a11b7dde8d138b3 Mon Sep 17 00:00:00 2001
From: Mike Monteith <mike@mikemonteith.com>
Date: Mon, 29 Apr 2024 14:42:44 +0100
Subject: [PATCH] Add code examples to documentation

---
 .eleventy.js                       |  36 +++++++
 docs/_includes/example.njk         |  79 ++++++++++++++
 docs/_includes/layouts/base.njk    |   3 +
 docs/_includes/layouts/example.njk |   8 ++
 docs/_includes/layouts/plain.njk   |  11 --
 docs/assets/css/_example.scss      |  50 +++++++++
 docs/assets/css/_tabs.scss         |  67 ++++++++++++
 docs/assets/css/_utilities.scss    |   3 +
 docs/assets/css/app.scss           |   6 ++
 docs/assets/js/app.njk             |   5 +
 docs/assets/js/copy.js             |  30 ++++++
 docs/assets/js/tabs.js             | 165 +++++++++++++++++++++++++++++
 docs/components/card-links.md      |   2 +
 docs/examples/cards.md             |  19 ----
 docs/examples/cards/card-link.njk  |  13 +++
 docs/examples/index.md             |  11 --
 package-lock.json                  |  23 ++++
 package.json                       |   1 +
 18 files changed, 491 insertions(+), 41 deletions(-)
 create mode 100644 docs/_includes/example.njk
 create mode 100644 docs/_includes/layouts/example.njk
 delete mode 100644 docs/_includes/layouts/plain.njk
 create mode 100644 docs/assets/css/_example.scss
 create mode 100644 docs/assets/css/_tabs.scss
 create mode 100644 docs/assets/css/_utilities.scss
 create mode 100644 docs/assets/js/app.njk
 create mode 100644 docs/assets/js/copy.js
 create mode 100644 docs/assets/js/tabs.js
 delete mode 100644 docs/examples/cards.md
 create mode 100644 docs/examples/cards/card-link.njk
 delete mode 100644 docs/examples/index.md

diff --git a/.eleventy.js b/.eleventy.js
index 1e08e46..4b29544 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -2,6 +2,11 @@ import path from 'path'
 import nunjucks from 'nunjucks'
 import sass from 'sass'
 import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
+import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
+
+import matter from 'gray-matter'
+import fs from 'fs'
+import prettier from 'prettier'
 
 const nunjucksEnv = nunjucks.configure([
   // Our own components which we will ship in the release
@@ -9,6 +14,7 @@ const nunjucksEnv = nunjucks.configure([
 
   // Includes specific to our documentation
   'docs/_includes',
+  'docs/assets',
 
   // NHS.UK frontend components
   'node_modules/nhsuk-frontend/packages/components'
@@ -20,6 +26,10 @@ export default function (eleventyConfig) {
 
   // Watch for changes in these directories and files
   eleventyConfig.addWatchTarget('./src/')
+  eleventyConfig.addWatchTarget('./docs/assets/')
+
+  // Add syntax highlighting to code blocks
+  eleventyConfig.addPlugin(syntaxHighlight)
 
   eleventyConfig.addTemplateFormats('scss')
   eleventyConfig.addExtension('scss', {
@@ -43,6 +53,32 @@ export default function (eleventyConfig) {
   // https://www.11ty.dev/docs/plugins/html-base/
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin)
 
+  eleventyConfig.addShortcode('example', async function (examplePath) {
+    const exampleFile = fs
+      .readFileSync(path.join('docs/examples', examplePath), 'utf8')
+      .trim()
+    let { data, content: nunjucksCode } = matter(exampleFile)
+
+    const rawHtmlCode = nunjucksEnv.renderString(nunjucksCode)
+    const prettyHtmlCode = await prettier.format(rawHtmlCode, {
+      parser: 'html'
+    })
+
+    const href = `/examples/${examplePath.replace('.njk', '')}`
+
+    const templateData = {
+      examplePath,
+      href,
+      id: href.replace(/\//g, '-'),
+      title: data.title,
+      htmlCode: prettyHtmlCode,
+      nunjucksCode: nunjucksCode,
+      figmaLink: data.figmaLink,
+      vueLink: data.vueLink
+    }
+    return nunjucksEnv.render('example.njk', templateData)
+  })
+
   return {
     dir: {
       input: 'docs',
diff --git a/docs/_includes/example.njk b/docs/_includes/example.njk
new file mode 100644
index 0000000..74e4ee3
--- /dev/null
+++ b/docs/_includes/example.njk
@@ -0,0 +1,79 @@
+<div class="app-example">
+  <span class="app-example__new-window">
+    <a href="{{ href | url }}" target="_blank">Open this example <span class="nhsuk-u-visually-hidden">({{ title }})</span> in a new window</a>
+  </span>
+  <iframe
+    onload="this.style.height = this.contentWindow.document.documentElement.scrollHeight + 'px';"
+    class="app-example__frame"
+    scrolling="auto"
+    frameborder="0"
+    height="{{ height }}"
+    src="{{ href | url }}"
+    title="{{ title }}"
+  ></iframe>
+</div>
+
+<div class="app-tabs" data-module="app-tabs">
+  <ul class="app-tabs__list" role="tablist">
+    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#html-default-{{ id }}" role="tab" id="tab_html-default-{{ id }}" aria-controls="html-default-{{ id }}">HTML</a></li>
+    <li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#nunjucks-default-{{ id }}" role="tab" id="tab_nunjucks-default-{{ id }}" aria-controls="nunjucks-default-{{ id }}">Nunjucks</a></li>
+    {%- if jsCode %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#js-default-{{ id }}" role="tab" id="tab_js-default-{{ id }}" aria-controls="js-default-{{ id }}">JavaScript</a></li>{% endif -%}
+    {%- if figmaLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#figma-default-{{ id }}" role="tab" id="tab_figma-default-{{ id }}" aria-controls="figma-default-{{ id }}">Figma</a></li>{% endif -%}
+    {%- if vueLink %}<li class="app-tabs__list-item" role="presentation"><a class="app-tabs__tab" href="#vue-default-{{ id }}" role="tab" id="tab_vue-default-{{ id }}" aria-controls="vue-default-{{ id }}">Vue</a></li>{% endif -%}
+  </ul>
+
+  <div class="app-tabs__panel app-tabs__panel--hidden" id="html-default-{{ id }}" role="tabpanel" aria-labelledby="tab_html-default-{{ id }}">
+    <button class="app-copy__button app-u-hidden" data-module="app-copy" data-clipboard-target="#html-default-{{ id }}-code">Copy code</button>
+    <div id="html-default-{{ id }}-code">
+      {%- highlight "html" -%}
+        {{ htmlCode | safe }}
+      {%- endhighlight -%}
+    </div>
+  </div>
+
+  <div class="app-tabs__panel app-tabs__panel--hidden" id="nunjucks-default-{{ id }}" role="tabpanel" aria-labelledby="tab_nunjucks-default-{{ id }}">
+    <button class="app-copy__button app-u-hidden" data-module="app-copy" data-clipboard-target="#nunjucks-default-{{ id }}-code">Copy code</button>
+
+    {%- if arguments -%}
+      <details class="nhsuk-details nhsuk-u-padding-3" data-module="nhsuk-details">
+        <summary class="nhsuk-details__summary">
+          <span class="nhsuk-details__summary-text">
+            Nunjucks macro options
+          </span>
+        </summary>
+        <div class="nhsuk-details__text">
+
+          {% include "./arguments/" + arguments + ".md" %}
+
+        </div>
+      </details>
+    {%- endif -%}
+
+<div id="nunjucks-default-{{ id }}-code">
+
+```jinja2
+{{ nunjucksCode | safe }}
+```
+
+</div>
+
+  </div>
+
+  {% if figmaLink -%}
+<div class="app-tabs__panel nhsuk-u-padding-2 app-tabs__panel--hidden" id="figma-default-{{ id }}" role="tabpanel" aria-labelledby="tab_figma-default-{{ id }}">
+
+  To use the component in your design, add the NHS App Figma Kit to your Figma libraries and find the component using the Assets tab.
+
+  [View component in Figma]({{ figmaLink }})
+</div>
+  {% endif -%}
+
+  {% if vueLink -%}
+<div class="app-tabs__panel nhsuk-u-padding-2 app-tabs__panel--hidden" id="vue-default-{{ id }}" role="tabpanel" aria-labelledby="tab_vue-default-{{ id }}">
+
+  To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
+
+  [View component in Vue]({{ vueLink }})
+</div>
+  {% endif -%}
+</div>
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
index 37702fd..c1fd749 100644
--- a/docs/_includes/layouts/base.njk
+++ b/docs/_includes/layouts/base.njk
@@ -10,8 +10,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 
     <link href="/assets/css/app.css" rel="stylesheet" />
+    <script src="/assets/js/app.js" defer></script>
 
     <title>{{ title }}</title>
+
+    {% block head %}{% endblock %}
   </head>
   <body>
     {% block body %}
diff --git a/docs/_includes/layouts/example.njk b/docs/_includes/layouts/example.njk
new file mode 100644
index 0000000..7567a59
--- /dev/null
+++ b/docs/_includes/layouts/example.njk
@@ -0,0 +1,8 @@
+{% extends "./base.njk" %}
+
+{% block header %}{% endblock %}
+{% block footer %}{% endblock %}
+
+{% block content %}
+  {{ content | safe }}
+{% endblock %}
diff --git a/docs/_includes/layouts/plain.njk b/docs/_includes/layouts/plain.njk
deleted file mode 100644
index 41f9400..0000000
--- a/docs/_includes/layouts/plain.njk
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "./base.njk" %}
-
-{% block body %}
-  <main role="main">
-    {% block main %}
-      <h1>{{ title }}</h1>
-
-      {{ content | safe }}
-    {% endblock %}
-  </main>
-{% endblock %}
diff --git a/docs/assets/css/_example.scss b/docs/assets/css/_example.scss
new file mode 100644
index 0000000..b74587e
--- /dev/null
+++ b/docs/assets/css/_example.scss
@@ -0,0 +1,50 @@
+/* ==========================================================================
+   #EXAMPLE
+   ========================================================================== */
+
+.app-example {
+  background-color: $color_nhsuk-white;
+  border: 1px solid $nhsuk-border-color;
+  position: relative;
+}
+
+.app-example__frame {
+  background-color: $color_nhsuk-white;
+  border: 0;
+  display: block;
+  width: 100%;
+}
+
+.app-example-page {
+  margin-bottom: -1px;
+  padding: 30px;
+  padding-top: 60px;
+  position: relative;
+}
+
+.app-example__new-window {
+  @include nhsuk-font($size: 14);
+  border: 1px solid $nhsuk-border-color;
+  position: absolute;
+  top: -1px;
+  left: -1px;
+
+  a,
+  a:link,
+  a:visited {
+    background-color: white;
+    color: $color_nhsuk-blue;
+    display: block;
+    padding: 5px 10px;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: $nhsuk-link-hover-color;
+  }
+
+  a:focus {
+    color: $nhsuk-focus-text-color;
+    background-color: $nhsuk-focus-color;
+  }
+}
diff --git a/docs/assets/css/_tabs.scss b/docs/assets/css/_tabs.scss
new file mode 100644
index 0000000..2297f26
--- /dev/null
+++ b/docs/assets/css/_tabs.scss
@@ -0,0 +1,67 @@
+/* ==========================================================================
+   #TABS
+   ========================================================================== */
+
+.app-tabs {
+  margin-bottom: nhsuk-spacing(6);
+}
+
+.app-tabs__list {
+  background: $color_nhsuk-white;
+  border: 1px solid $nhsuk-border-color;
+  border-top: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  display: flex;
+}
+
+.app-tabs__list-item {
+  border-right: 1px solid $nhsuk-border-color;
+  margin: 0;
+
+  z-index: 2;
+}
+
+.app-tabs__tab {
+  @include nhsuk-font($size: 19, $weight: bold);
+  background-color: $color_nhsuk-white;
+  color: $color_nhsuk-blue;
+  display: block;
+  padding: 20px;
+  position: relative;
+  text-decoration: none;
+
+  &[aria-selected="true"] {
+    background-color: $color_nhsuk-grey-5;
+    color: $color_nhsuk-black;
+    margin-bottom: -1px;
+    padding-bottom: 21px;
+
+    &:focus {
+      background-color: $nhsuk-focus-color;
+    }
+  }
+}
+
+.app-tabs__panel {
+  @include nhsuk-font($size: 16);
+  background-color: $color_nhsuk-grey-5;
+  border: 1px solid $nhsuk-border-color;
+  border-top: 0;
+  position: relative;
+
+  &--hidden {
+    display: none;
+  }
+
+  *:last-of-type {
+    margin-bottom: 0; // Remove margin bottom from any last element
+  }
+
+  p {
+    max-width: 100% !important;
+    padding: nhsuk-spacing(2);
+  }
+}
diff --git a/docs/assets/css/_utilities.scss b/docs/assets/css/_utilities.scss
new file mode 100644
index 0000000..1dcfa03
--- /dev/null
+++ b/docs/assets/css/_utilities.scss
@@ -0,0 +1,3 @@
+.app-u-hidden {
+  display: none;
+}
diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss
index e2caa57..b592709 100644
--- a/docs/assets/css/app.scss
+++ b/docs/assets/css/app.scss
@@ -5,9 +5,15 @@
 @import "node_modules/nhsuk-frontend/packages/components/skip-link/skip-link.scss";
 @import "node_modules/nhsuk-frontend/packages/components/header/header.scss";
 @import "node_modules/nhsuk-frontend/packages/components/hero/hero.scss";
+@import "node_modules/nhsuk-frontend/packages/components/tabs/tabs.scss";
+
+@import "node_modules/prismjs/themes/prism";
 
 // Import all styles from the NHS App frontend library
 @import "src/all.scss";
 
 // Import all styles specific for the design system docs
 @import "docs/assets/css/components/side-navigation";
+@import "docs/assets/css/tabs.scss";
+@import "docs/assets/css/example.scss";
+@import "docs/assets/css/utilities.scss";
diff --git a/docs/assets/js/app.njk b/docs/assets/js/app.njk
new file mode 100644
index 0000000..2c1338d
--- /dev/null
+++ b/docs/assets/js/app.njk
@@ -0,0 +1,5 @@
+---
+permalink: assets/js/app.js
+---
+{% include "js/tabs.js" %}
+{% include "js/copy.js" %}
diff --git a/docs/assets/js/copy.js b/docs/assets/js/copy.js
new file mode 100644
index 0000000..7b90331
--- /dev/null
+++ b/docs/assets/js/copy.js
@@ -0,0 +1,30 @@
+const Copy = function (button) {
+  this.button = button
+
+  // If the browser supports the Clipboard API, show the copy button
+  if (navigator.clipboard) {
+    this.button.classList.remove('app-u-hidden')
+  }
+
+  button.addEventListener('click', (e) => this.handleCopyClick(e))
+}
+
+Copy.prototype.handleCopyClick = function (e) {
+  e.preventDefault()
+  const copyFrom = this.button.getAttribute('data-clipboard-target')
+  const str = document.querySelector(copyFrom).innerText
+  navigator.clipboard.writeText(str)
+
+  // Change the button text to "Copied" for 5 seconds
+  const originalText = this.button.innerText
+  this.button.innerText = 'Copied'
+  setTimeout(() => {
+    this.button.innerText = originalText
+  }, 5000)
+}
+
+document
+  .querySelectorAll('[data-module="app-copy"]')
+  .forEach(function (element) {
+    new Copy(element)
+  })
diff --git a/docs/assets/js/tabs.js b/docs/assets/js/tabs.js
new file mode 100644
index 0000000..8d19336
--- /dev/null
+++ b/docs/assets/js/tabs.js
@@ -0,0 +1,165 @@
+/**
+ * This code is taken from https://github.com/ministryofjustice/moj-frontend/blob/main/assets/javascript/tabs.js
+ * but has been modified to remove the jQuery dependency.
+ */
+
+const Tabs = function (container) {
+  this.container = container
+  this.keys = { left: 37, right: 39, up: 38, down: 40 }
+  this.cssHide = 'app-tabs__panel--hidden'
+  this.tabs = container.querySelectorAll('.app-tabs__tab')
+  this.panels = container.querySelectorAll('.app-tabs__panel')
+
+  this.container.querySelectorAll('[role=tab]').forEach((tab) => {
+    tab.addEventListener('click', this.onTabClick.bind(this))
+    tab.addEventListener('keydown', this.onTabKeydown.bind(this))
+  })
+
+  // TODO: this class doesn't exist???
+  /*
+  this.container
+    .querySelector('.app-tabs__close')
+    .addEventListener('click', this.onCloseButtonClick.bind(this))
+  */
+  this.setupHtml()
+}
+
+Tabs.prototype.hasTab = function (hash) {
+  return this.container.querySelector(hash).length
+}
+
+Tabs.prototype.hideTab = function (tab) {
+  this.unhighlightTab(tab)
+  this.hidePanel(tab)
+}
+
+Tabs.prototype.showTab = function (tab) {
+  this.highlightTab(tab)
+  this.showPanel(tab)
+}
+
+Tabs.prototype.getTab = function (hash) {
+  return this.tabs.filter('a[href="' + hash + '"]')
+}
+
+Tabs.prototype.setupHtml = function () {
+  this.container
+    .querySelector('.app-tabs__list')
+    .setAttribute('role', 'tablist')
+  this.container
+    .querySelector('.app-tabs__list-item')
+    .setAttribute('role', 'presentation')
+  this.tabs.forEach(function (tab) {
+    tab.setAttribute('role', 'tab')
+  })
+  this.panels.forEach(function (panel) {
+    panel.setAttribute('role', 'tabpanel')
+  })
+
+  this.tabs.forEach((tab) => {
+    let panelId = this.getHref(tab).slice(1)
+    tab.id = 'tab_' + panelId
+    tab.setAttribute('aria-controls', panelId)
+  })
+
+  this.tabs.forEach((tab) => {
+    let panelId = this.getHref(tab).slice(1)
+    tab.id = 'tab_' + panelId
+    tab.setAttribute('aria-controls', panelId)
+  })
+  this.panels.forEach((panel, i) => {
+    panel.setAttribute('aria-labelledby', this.tabs[i].id)
+    panel.classList.add(this.cssHide)
+  })
+}
+
+Tabs.prototype.onTabClick = function (e) {
+  e.preventDefault()
+  let newTab = e.target
+  let currentTab = this.getCurrentTab()
+  if (currentTab) {
+    this.hideTab(currentTab)
+  }
+  if (newTab !== currentTab) {
+    this.showTab(newTab)
+  }
+}
+
+Tabs.prototype.onTabKeydown = function (e) {
+  switch (e.keyCode) {
+    case this.keys.left:
+    case this.keys.up:
+      this.activatePreviousTab()
+      e.preventDefault()
+      break
+    case this.keys.right:
+    case this.keys.down:
+      this.activateNextTab()
+      e.preventDefault()
+      break
+  }
+}
+
+Tabs.prototype.activateNextTab = function () {
+  const currentTab = this.getCurrentTab()
+  const nextTab =
+    currentTab?.parentElement?.nextElementSibling?.querySelector('[role=tab]')
+  if (nextTab) {
+    this.hideTab(currentTab)
+    this.showTab(nextTab)
+    nextTab.focus()
+  }
+}
+
+Tabs.prototype.activatePreviousTab = function () {
+  let currentTab = this.getCurrentTab()
+  let previousTab =
+    currentTab?.parentElement?.previousElementSibling?.querySelector(
+      '[role=tab]'
+    )
+  if (previousTab) {
+    this.hideTab(currentTab)
+    this.showTab(previousTab)
+    previousTab.focus()
+  }
+}
+
+Tabs.prototype.showPanel = function (tab) {
+  document.querySelector(this.getHref(tab)).classList.remove(this.cssHide)
+}
+
+Tabs.prototype.hidePanel = function (tab) {
+  document.querySelector(this.getHref(tab)).classList.add(this.cssHide)
+}
+
+Tabs.prototype.unhighlightTab = function (tab) {
+  tab.setAttribute('aria-selected', 'false')
+}
+
+Tabs.prototype.highlightTab = function (tab) {
+  tab.setAttribute('aria-selected', 'true')
+}
+
+Tabs.prototype.getCurrentTab = function () {
+  return this.container.querySelector('[role=tab][aria-selected=true]')
+}
+
+// this is because IE doesn't always return the actual value but a relative full path
+// should be a utility function most prob
+// http://labs.thesedays.com/blog/2010/01/08/getting-the-href-value-with-jquery-in-ie/
+Tabs.prototype.getHref = function (tab) {
+  let href = tab.getAttribute('href')
+  return href.slice(href.indexOf('#'), href.length)
+}
+
+Tabs.prototype.onCloseButtonClick = function (e) {
+  let currentTab = this.getCurrentTab()
+  this.hideTab(currentTab)
+  this.tabs.first().focus()
+}
+
+document
+  .querySelectorAll('[data-module="app-tabs"]')
+  .forEach(function (element) {
+    new Tabs(element)
+  })
diff --git a/docs/components/card-links.md b/docs/components/card-links.md
index dcfec3f..fc07e9b 100644
--- a/docs/components/card-links.md
+++ b/docs/components/card-links.md
@@ -30,6 +30,8 @@ This is our preferred style. A concise phrase explains where the link goes. It c
 
 [embed short card link example]
 
+{% example "cards/card-link.njk" %}
+
 ### Card link with paragraph text
 
 On pages deeper in the structure of the NHS App, users may need more details to understand where links go. In this case, you can use paragraph text below the heading to give more information.
diff --git a/docs/examples/cards.md b/docs/examples/cards.md
deleted file mode 100644
index 047c737..0000000
--- a/docs/examples/cards.md
+++ /dev/null
@@ -1,19 +0,0 @@
----
-layout: layouts/plain.njk
-title: Cards
----
-
-{% from "card/macro.njk" import card %}
-
-<h2>Card Link</h2>
-{{ card({
-  title: 'Title',
-  href: '#'
-}) }}
-
-<h2>Card Link with text</h2>
-{{ card({
-  title: 'Title',
-  href: '#',
-  description: 'Supporting text'
-}) }}
diff --git a/docs/examples/cards/card-link.njk b/docs/examples/cards/card-link.njk
new file mode 100644
index 0000000..4cd29c0
--- /dev/null
+++ b/docs/examples/cards/card-link.njk
@@ -0,0 +1,13 @@
+---
+layout: layouts/example.njk
+title: Card link
+figmaLink: "https://www.figma.com/file/6f2CbcZ7cnpNrtKEcfQp8X/NHS-App-Design-System?type=design&node-id=128%3A7303&mode=design&t=DLiyCHcTTAYkEDa0-1"
+vueLink: "https://nhsappvuecomponentlibraryv1.nonlive.nhsapp.service.nhs.uk/?path=/docs/components-nhscardlink--docs"
+---
+
+{% from "card/macro.njk" import card %}
+
+{{ card({
+  title: 'Title',
+  href: '#'
+}) }}
diff --git a/docs/examples/index.md b/docs/examples/index.md
deleted file mode 100644
index d5223d4..0000000
--- a/docs/examples/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-layout: layouts/plain.njk
-title: Examples
----
-
-{% from "card/macro.njk" import card %}
-
-{{ card({
-    title: "Cards",
-    href: "./cards"
-}) }}
diff --git a/package-lock.json b/package-lock.json
index e23e30d..d44524e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@11ty/eleventy": "3.0.0-alpha.6",
+        "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "concurrently": "^8.2.2",
         "gulp": "^5.0.0",
         "gulp-clean": "^0.4.0",
@@ -227,6 +228,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz",
+      "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==",
+      "dev": true,
+      "dependencies": {
+        "prismjs": "^1.29.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/11ty"
+      }
+    },
     "node_modules/@11ty/eleventy-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.2.tgz",
@@ -3609,6 +3623,15 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
diff --git a/package.json b/package.json
index 9d5c9dd..6307ddf 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   "homepage": "https://github.com/nhsuk/nhsapp-frontend#readme",
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.6",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "concurrently": "^8.2.2",
     "gulp": "^5.0.0",
     "gulp-clean": "^0.4.0",