Support markdown in scenarios

app/app.js

@@ -39,6 +39,7 @@ module.exports = (options) => {
 
   // make the function available as a filter for all templates
   env.addFilter('componentNameToMacroName', helperFunctions.componentNameToMacroName)
+  env.addGlobal('markdown', require('marked'))
 
   // Set view engine
   app.set('view engine', 'njk')

app/assets/scss/app.scss

@@ -3,3 +3,4 @@ $govuk-show-breakpoints: true;
 @import "../../../src/all";
 @import "partials/app";
 @import "partials/banner";
+@import "partials/prose";

app/assets/scss/partials/_prose.scss

@@ -0,0 +1,59 @@
+.app-prose-scope {
+
+  h1 {
+    @extend %govuk-heading-xl;
+  }
+
+  h2 {
+    @extend %govuk-heading-l;
+  }
+
+  h3 {
+    @extend %govuk-heading-m;
+  }
+
+  h4 {
+    @extend %govuk-heading-s;
+  }
+
+  p {
+    @extend %govuk-body-m;
+  }
+
+  strong,
+  b {
+    @include govuk-typography-weight-bold;
+  }
+
+  ul,
+  ol {
+    @extend %govuk-list;
+  }
+
+  ol {
+    @extend %govuk-list--number;
+  }
+
+  ul {
+    @extend %govuk-list--bullet;
+  }
+
+  a {
+    @extend %govuk-link;
+  }
+
+  hr {
+    @extend %govuk-section-break;
+    @extend %govuk-section-break--visible;
+    @extend %govuk-section-break--xl;
+  }
+
+  pre + h2 {
+    padding-top: govuk-spacing(4);
+  }
+
+  pre + h3,
+  pre + h4 {
+    padding-top: govuk-spacing(2);
+  }
+}

app/views/full-page-examples/bank-holidays/index.njk

@@ -1,4 +1,18 @@
-{# This example is based of the live "UK bank holidays" page: https://www.gov.uk/bank-holidays #}
+---
+scenario: >-
+  You want to know when the next bank holiday will be.
+
+
+  Things to try:
+
+  1. Find out when the next bank holiday is in Scotland.
+
+  2. Find out when the Boxing Day bank holiday is in 2020.
+
+notes: >-
+  This example is based on https://www.gov.uk/bank-holidays.
+  The data is not 'live' and so the answer is unlikely to be correct.
+---
 {% extends "_generic.njk" %}
 
 {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}

app/views/full-page-examples/index.njk

@@ -25,9 +25,9 @@
       <h2 class="govuk-heading-m"><a href="/full-page-examples/{{ example.path }}" class="govuk-link">{{ example.name | replace("-", " ") | capitalize }}</a></h2>
 
       {% if example.scenario %}
-      <p class="govuk-body">
-        {{ example.scenario }}
-      </p>
+      <div class="app-prose-scope">
+        {{ markdown(example.scenario) | safe }}
+      </div>
       {% endif %}
 
       {% if example.notes %}