Switch to Highlight.js syntax highlighting (#230)

This removes the existing syntax highlighting which uses Prism, which
runs client-side, and swaps it for Highlight.js, which runs server-side.

It copies across the colours and styling for both inline code examples
and longer code blocks from the NHS Service manual (where they’ve been
tweaked to ensure a good colour contrast).

The longer code blocks use a new `codeSnippet` macro, which also takes a
`language` parameter that is passed to Highlight.js and used for syntax
highlighting.

Resolves #21 

## Screenshots

| Type | Before | After |
|------|--------|-------|
| HTML | <img width="670" alt="Screenshot 2025-02-20 at 10 18 59"
src="https://github.com/user-attachments/assets/a7ccb439-bf9f-4080-b21d-9a6d82e88674"
/> | <img width="682" alt="Screenshot 2025-02-20 at 10 21 10"
src="https://github.com/user-attachments/assets/1b3f319a-98dd-4e8a-bd91-0033d4867107"
/> |
| JavaScript | <img width="667" alt="Screenshot 2025-02-20 at 10 17 49"
src="https://github.com/user-attachments/assets/bdd23ec6-eb76-4371-b61e-5fa1d282a06b"
/> | <img width="664" alt="Screenshot 2025-02-20 at 10 17 31"
src="https://github.com/user-attachments/assets/a299c100-5b7d-43da-b4f3-3cbeed363acf"
/> |
| Nunjucks | <img width="678" alt="Screenshot 2025-02-20 at 10 16 12"
src="https://github.com/user-attachments/assets/2fa2ed4c-0dd7-47d6-8c8d-a9e12153f538"
/> | <img width="664" alt="Screenshot 2025-02-20 at 10 16 00"
src="https://github.com/user-attachments/assets/2fb04fc5-35bc-4a30-b9ef-4f8e736cec86"
/> |
| Inline code reference | <img width="648" alt="Screenshot 2025-02-20 at
10 16 20"
src="https://github.com/user-attachments/assets/0a392912-e624-4ce1-bfe9-a02dac4b0206"
/> | <img width="666" alt="Screenshot 2025-02-20 at 10 16 31"
src="https://github.com/user-attachments/assets/b9f8ba05-566c-4caf-8b98-dc1feff5ea1d"
/> |

app.js

@@ -9,6 +9,7 @@ const dotenv = require('dotenv');
 const express = require('express');
 const nunjucks = require('nunjucks');
 const sessionInMemory = require('express-session');
+const highlightjs = require('highlight.js');
 
 // Run before other code to make sure variables from .env are available
 dotenv.config();
@@ -65,6 +66,11 @@ nunjucksConfig.express = app;
 const nunjucksAppEnv = nunjucks.configure(appViews, nunjucksConfig);
 nunjucksAppEnv.addGlobal('version', packageInfo.version);
 
+nunjucksAppEnv.addFilter('highlight', (code, language) => {
+  const languages = language ? [language] : false;
+  return highlightjs.highlightAuto(code.trim(), languages).value;
+});
+
 // Add Nunjucks filters
 utils.addNunjucksFilters(nunjucksAppEnv);
 

app/assets/sass/components/_code-snippet.scss

@@ -0,0 +1,8 @@
+// Code snippet
+.app-code-snippet {
+  background-color: $color_nhsuk-white;
+  border: 1px solid $nhsuk-border-color;
+  overflow: auto;
+  padding: nhsuk-spacing(1) nhsuk-spacing(3);
+  margin-bottom: nhsuk-spacing(3);
+}

app/assets/sass/docs.scss

@@ -11,33 +11,6 @@
   background-color: $color_nhsuk-grey-4 !important;
 }
 
-// <pre> and <code> tag styles
-.app-pre {
-  @include nhsuk-responsive-margin(4, "bottom");
-
-  background: $color_nhsuk-white;
-  border: 1px solid $nhsuk-border-color;
-  overflow: auto;
-  margin-top: 0;
-  padding: nhsuk-spacing(3);
-  position: relative;
-}
-
-li .app-code,
-p .app-code {
-  background: $color_nhsuk-white;
-  border: 1px solid $nhsuk-border-color;
-  padding: nhsuk-spacing(1) nhsuk-spacing(3);
-  font-size: 0.8em;
-}
-
-.nhsuk-expander .app-pre,
-.nhsuk-expander p .app-code,
-.nhsuk-expander li .app-code {
-  background: $color_nhsuk-grey-5;
-  border: 1px solid $color_nhsuk-grey-4;
-}
-
 // Installation guide screenshots
 .app-img-guide {
   width: 100%;

app/assets/sass/main.scss

@@ -3,6 +3,11 @@
 
 // Components that are not in the NHS.UK frontend library
 @import 'components/figure';
+@import 'components/code-snippet';
+
+@import 'styles/code';
+@import 'styles/highlight';
+
 
 ///////////////////////////////////////////
 // Add your custom CSS/Sass styles below...

app/assets/sass/styles/_code.scss

@@ -0,0 +1,9 @@
+// Highlight code within body copy
+// This uses the same styling as on the NHS Service Manual
+p code,
+li code {
+  background-color: $color_nhsuk-white;
+  color: #d14;
+  padding: 2px nhsuk-spacing(2);
+  word-break: break-word;
+}