Switch to Highlight.js syntax highlighting

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;
+}