Render all Nunjucks before Markdown runs

[colinrotherham]

This PR lays the groundwork to fix a bug lurking in our Metalsmith build

Notice how we sometimes render code blocks via Nunjucks:

<pre><code>{% raw %}
{% block skipLink %}
  {{ govukSkipLink({ text: "custom text" }) }}
{% endblock %}{% endraw %}</code></pre>

Or using a global + opt-in syntax highlighting filter:

{{- getNunjucksCode(examplePath) | highlight('js') | safe -}}

But sometimes rendering via Markdown with automatic syntax highlighting:

```javascript
{% raw %}
{% block header %}
  {{ govukFooter({ navigation: [] }) }}
{% endblock %}
{% endraw %}
```

This "works" but stray line breaks can trigger a double-highlight or double-render (code escaped twice) with both render stages (Nunjucks/Markdown) each calling into highlight.js

After this PR is merged we:

1. Compile Nunjucks 1st using @metalsmith/in-place
2. Compile Markdown 2nd using @metalsmith/markdown

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	9a330aa
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/63d81fea2bb3aa00074319a8
😎 Deploy Preview	https://deploy-preview-2565--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[domoscargin]

This looks good in principle.

I wonder if it's worth sticking a beautify step in between the Nunjucks and the Markdown.

It shouldn't affect displayed code blocks at all, but should hopefully limit the future diff between updates if somebody's made changes to a Nunjucks template but not worried about whitespace control.

I'm also wondering (but way out of scope for this PR) whether we should run a diff between the main branch's compiled code and PRs, sorta like the dist diff check on govuk-frontend: https://github.com/alphagov/govuk-frontend/blob/main/.github/workflows/diff-change-to-dist.yaml

Just feels like we don't have any easy way of checking diff except for manually doing it locally. I've popped in a possible thing to validate the compiled HTML, but that won't necessarily mean it doesn't hideously break something.

I'm now just using this comment as a sounding board! Whaddya think?

[colinrotherham]

@domoscargin Brill. Thanks for looking at this one too:

• Fix dangling angle bracket in compiled cookie banner govuk-frontend#3225

Have you noticed anything else?

I'm a bit aware that a HTML beautifier might hide potential whitespace issues, had a bit of hesitance to keep the max_preserve_newlines: 0 config versus getting better at our HTML output upstream in govuk-frontend

Knowing it's an issue, I've added this PR too:

• Use highlight.js (server-side) code syntax highlighting govuk-frontend#3224

👆 Hopefully we can be fully happy in one repo (govuk-frontend) then simply trust the output in this one?

[domoscargin]

@domoscargin Brill. Thanks for looking at this one too:

• Fix dangling angle bracket in compiled cookie banner govuk-frontend#3225

Have you noticed anything else?

I'm a bit aware that a HTML beautifier might hide potential whitespace issues, had a bit of hesitance to keep the max_preserve_newlines: 0 config versus getting better at our HTML output upstream in govuk-frontend

Knowing it's an issue, I've added this PR too:

• Use highlight.js (server-side) code syntax highlighting govuk-frontend#3224

👆 Hopefully we can be fully happy in one repo (govuk-frontend) then simply trust the output in this one?

I was thinking more of the non-code block Design System website specific stuff (the example macro is a big one), since the majority of code examples are done through the getHtmlCode function, which beautifies 'em anyway. I suppose kinda difficult to separate the two.

In terms of slight annoyances now, the cookie banner is also doing slightly eye-twitchy things with this code

<         <div class="govuk-cookie-banner__content">
<   <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>
---
>         <div class="govuk-cookie-banner__content">  <p class="govuk-body">We’d like to use analytics cookies so we can understand how you use the Design System and make improvements.</p>

But wrestling with Nunjucks whitespace control proved too annoying for me last night, and it's not really an issue, just irritating.

[domoscargin]

Makes sense, thanks!

I've added an issue for doing something with the compiled diff: #2574

But this is good to go.