Use vue code blocks everywhere and convert to vue-html in content plugin if needed

matteason · matteason · commit 379a6467f755 · 2023-08-20T16:41:27.000+01:00
diff --git a/content/2.components/accordion.md b/content/2.components/accordion.md
@@ -8,7 +8,7 @@ The accordion component lets users show and hide sections of related content on
 
 See the [GOV.UK Design System documentation on accordions](https://design-system.service.gov.uk/components/accordion/) for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-accordion>
   <gv-accordion-section heading="Writing well for the web">
     <p class="govuk-body">This is the content for Writing well for the web.</p>
diff --git a/content/2.components/back-link.md b/content/2.components/back-link.md
@@ -8,7 +8,7 @@ Use the back link component to help users go back to the previous page in a mult
 
 See the [GOV.UK Design System documentation on back links](https://design-system.service.gov.uk/components/back-link/) for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-back-link href="https://example.com">Back</gv-back-link>
 ```
 
diff --git a/content/2.components/breadcrumbs.md b/content/2.components/breadcrumbs.md
@@ -8,7 +8,7 @@ The breadcrumbs component helps users to understand where they are within a webs
 
 See the [GOV.UK Design System documentation on breadcrumbs](https://design-system.service.gov.uk/components/breadcrumbs/) for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-breadcrumbs>
   <gv-breadcrumb-item href="#">Home</gv-breadcrumb-item>
   <gv-breadcrumb-item href="#">Passports, travel and living abroad</gv-breadcrumb-item>
@@ -60,7 +60,7 @@ function handleClick(destination: String) {
 If you have long breadcrumbs you can configure the component to only show the first and last items on mobile devices
 by setting `:collapse-on-mobile="true"`.
 
-```vue-html
+```vue
 <gv-breadcrumbs :collapse-on-mobile="true">
   <gv-breadcrumb-item href="#">Home</gv-breadcrumb-item>
   <gv-breadcrumb-item href="#">Environment</gv-breadcrumb-item>
diff --git a/content/2.components/button.md b/content/2.components/button.md
@@ -53,7 +53,7 @@ function handleClick() {
 
 Set `:is-start-button="true"` to show a start button.
 
-```vue-html
+```vue
 <gv-button :is-start-button="true">
   Start now
 </gv-button>
@@ -63,13 +63,13 @@ Set `:is-start-button="true"` to show a start button.
 
 Use the `variant` prop to change between primary, secondary and warning buttons.
 
-```vue-html
+```vue
 <gv-button variant="secondary">
   Find address
 </gv-button>
 ```
 
-```vue-html
+```vue
 <gv-button variant="warning">
   Delete account
 </gv-button>
@@ -79,7 +79,7 @@ Use the `variant` prop to change between primary, secondary and warning buttons.
 
 Wrap buttons in a `gv-button-group` to display them side-by-side on larger screens or stacked on smaller screens.
 
-```vue-html
+```vue
 <gv-button-group>
   <gv-button>
     Save and continue
diff --git a/content/2.components/character-count.md b/content/2.components/character-count.md
@@ -8,7 +8,7 @@ Help users know how much text they can enter when there is a limit on the number
 
 See the [GOV.UK Design System documentation on character counts](https://design-system.service.gov.uk/components/character-count/) for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-character-count 
   label="Can you provide more detail?" 
   :label-is-page-heading="true" 
@@ -25,7 +25,7 @@ See the [GOV.UK Design System documentation on character counts](https://design-
 
 Use the `max-words` prop to count words instead of characters. A word is any group of consecutive non-whitespace characters.
 
-```vue-html
+```vue
 <gv-character-count 
   label="Enter a job description" 
   :label-is-page-heading="true" 
diff --git a/content/2.components/checkboxes.md b/content/2.components/checkboxes.md
@@ -101,7 +101,7 @@ const termsAccepted = ref('No')
 
 You can add hints to both the checkbox group and individual checkboxes using the `hint` prop or slot.
 
-```vue-html
+```vue
 <gv-checkboxes
   :legend-is-page-heading="true"
   legend-class="govuk-fieldset__legend--l"
@@ -157,7 +157,7 @@ const countries = ref([])
 
 You can show conditional content that's only shown when a checkbox is checked using the `conditional` slot.
 
-```vue-html
+```vue
 <gv-checkboxes
   :legend-is-page-heading="true"
   legend-class="govuk-fieldset__legend--l"
@@ -193,7 +193,7 @@ You can show conditional content that's only shown when a checkbox is checked us
 
 Set the `size` prop to `small` to use smaller checkboxes.
 
-```vue-html
+```vue
 <gv-checkboxes
   :legend-is-page-heading="true"
   legend-class="govuk-fieldset__legend--m"
@@ -211,7 +211,7 @@ Set the `size` prop to `small` to use smaller checkboxes.
 
 Set the `error-message` prop to display an error.
 
-```vue-html
+```vue
 <gv-checkboxes
   :legend-is-page-heading="true"
   legend-class="govuk-fieldset__legend--l"
diff --git a/content/2.components/details.md b/content/2.components/details.md
@@ -8,7 +8,7 @@ Make a page easier to scan by letting users reveal more detailed information onl
 
 See the [GOV.UK Design System documentation on the details component](https://design-system.service.gov.uk/components/details/) for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-details summary="Help with nationality">
   <p class="govuk-body">
     We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot 
diff --git a/content/2.components/error-message.md b/content/2.components/error-message.md
@@ -10,7 +10,7 @@ when there is a validation error. In the error message explain what went wrong a
 See the [GOV.UK Design System documentation on error messages](https://design-system.service.gov.uk/components/error-message/) 
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-error-message>Enter your date of birth</gv-error-message>
 ```
 
diff --git a/content/2.components/error-summary.md b/content/2.components/error-summary.md
@@ -12,7 +12,7 @@ answer that contains an error.
 See the [GOV.UK Design System documentation on error summaries](https://design-system.service.gov.uk/components/error-summary/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-error-summary :disable-auto-focus="true">
   <gv-error-link target-id="name">
     Enter your full name
diff --git a/content/2.components/fieldset.md b/content/2.components/fieldset.md
@@ -9,7 +9,7 @@ Use the fieldset component to group related form inputs.
 See the [GOV.UK Design System documentation on fieldsets](https://design-system.service.gov.uk/components/fieldset/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-fieldset 
   legend="What is your address?" 
   :legend-is-page-heading="true" 
diff --git a/content/2.components/file-upload.md b/content/2.components/file-upload.md
@@ -9,7 +9,7 @@ Help users select and upload a file.
 See the [GOV.UK Design System documentation on file uploads](https://design-system.service.gov.uk/components/file-upload/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-file-upload label="Upload a file"/>
 ```
 
diff --git a/content/2.components/header.md b/content/2.components/header.md
@@ -9,15 +9,15 @@ The GOV.UK header shows users that they are on GOV.UK and which service they are
 See the [GOV.UK Design System documentation on the header](https://design-system.service.gov.uk/components/header/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-header />
 ```
 
 ## Adding a service name
 
 Use the `service-name` prop or slot to include your service name in the header. 
 
-```vue-html
+```vue
 <gv-header service-name="Service name" />
 ```
 
@@ -26,7 +26,7 @@ Use the `service-name` prop or slot to include your service name in the header.
 Pass a list of `GvHeaderNavigationItem`s in the `navigation` slot to include navigation links. Set the `active` prop to 
 `true` if the link is for the current page or one of its children.
 
-```vue-html
+```vue
 <gv-header service-name="Service name">
   <template #navigation>
     <gv-header-navigation-item href="#" :active="true">
diff --git a/content/2.components/inset-text.md b/content/2.components/inset-text.md
@@ -13,7 +13,7 @@ Use the inset text component to differentiate a block of text from the content t
 See the [GOV.UK Design System documentation on inset text](https://design-system.service.gov.uk/components/inset-text/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-inset-text>
   It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application. 
 </gv-inset-text>
diff --git a/content/2.components/notification-banner.md b/content/2.components/notification-banner.md
@@ -9,7 +9,7 @@ Use a notification banner to tell the user about something they need to know abo
 See the [GOV.UK Design System documentation on notification banners](https://design-system.service.gov.uk/components/notification-banner/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-notification-banner>
   <p class="govuk-notification-banner__heading">
     You have 7 days left to send your application.
@@ -27,7 +27,7 @@ By default, the success banner will be auto-focussed when it's mounted. You can
 `:disable-auto-focus="true"`. You can also set `role="region"` - the default for success banners is `role="alert"`,
 but the auto-focus will be disabled for any other role.
 
-```vue-html
+```vue
 <gv-notification-banner type="success" :disable-auto-focus="true">
   <h3 class="govuk-notification-banner__heading">
     Training outcome recorded and trainee withdrawn
@@ -42,7 +42,7 @@ You can either use the `text` prop or the default slot to provide content to sho
 If you use the prop, the content will automatically be wrapped in a `<p class="govuk-notification-banner__heading">`, which will apply the
 correct paragraph styling. If you use the slot, you'll need to wrap your paragraphs manually.
 
-```vue-html
+```vue
 <gv-notification-banner text="There may be a delay in processing your application because of the coronavirus outbreak." />
 ```
 
diff --git a/content/2.components/panel.md b/content/2.components/panel.md
@@ -8,7 +8,7 @@ The panel component is a visible container used on confirmation or results pages
 
 See the [GOV.UK Design System documentation on panels](https://design-system.service.gov.uk/components/panel/) for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-panel>
   <template #title>
     Application complete
diff --git a/content/2.components/phase-banner.md b/content/2.components/phase-banner.md
@@ -9,7 +9,7 @@ Use the phase banner component to show users your service is still being worked
 See the [GOV.UK Design System documentation on the phase banner](https://design-system.service.gov.uk/components/phase-banner/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-phase-banner tag="Alpha">      
   This is a new service – your <a class="govuk-link" href="https://github.com/govuk-vue/govuk-vue/issues">feedback</a> will help us to improve it.
 </gv-phase-banner>
@@ -19,7 +19,7 @@ for more information on when to use this component.
 
 You can omit the tag if it's not required for your service but you still want to provide a feedback link.
 
-```vue-html
+```vue
 <gv-phase-banner>      
   You can <a class="govuk-link" href="https://github.com/govuk-vue/govuk-vue/issues">send us feedback</a> to help us improve this service.
 </gv-phase-banner>
diff --git a/content/2.components/radios.md b/content/2.components/radios.md
@@ -9,7 +9,7 @@ Use the radios component when users can only select one option from a list.
 See the [GOV.UK Design System documentation on radios](https://design-system.service.gov.uk/components/radios/) for 
 more information on when to use this component.
 
-```vue-html
+```vue
 <gv-radios legend="Where do you live?" :legend-is-page-heading="true" legend-class="govuk-fieldset__legend--l">
   <gv-radio value="england">England</gv-radio>
   <gv-radio value="scotland">Scotland</gv-radio>
@@ -66,7 +66,7 @@ const selectedCountry = ref(null)
 
 Set the `direction` prop to `inline` to show checkboxes side-by-side on larger screens.
 
-```vue-html
+```vue
 <gv-radios 
   legend="Have you changed your name?"
   :legend-is-page-heading="true"
@@ -83,7 +83,7 @@ Set the `direction` prop to `inline` to show checkboxes side-by-side on larger s
 
 You can add hints to both the checkbox group and individual checkboxes using the `hint` prop or slot.
 
-```vue-html
+```vue
 <gv-radios legend="How do you want to sign in?" :legend-is-page-heading="true" legend-class="govuk-fieldset__legend--l">
   <template #hint>
     You’ll need an account to prove your identity and complete your Self Assessment.
@@ -108,7 +108,7 @@ You can add hints to both the checkbox group and individual checkboxes using the
 
 Set the `divider` prop to show a text divider above an option. The text is usually the word 'or'.
 
-```vue-html
+```vue
 <gv-radios legend="Where do you live?" :legend-is-page-heading="true" legend-class="govuk-fieldset__legend--l">
   <gv-radio value="england">England</gv-radio>
   <gv-radio value="scotland">Scotland</gv-radio>
@@ -122,7 +122,7 @@ Set the `divider` prop to show a text divider above an option. The text is usual
 
 Use the `conditional` slot to show a related question when an option is selected.
 
-```vue-html
+```vue
 <gv-radios
   :legend-is-page-heading="true"
   legend-class="govuk-fieldset__legend--l"
@@ -158,7 +158,7 @@ Use the `conditional` slot to show a related question when an option is selected
 
 Set the `size` prop to `small` to use smaller radios.
 
-```vue-html
+```vue
 <gv-radios size="small" legend="Filter" legend-class="govuk-fieldset__legend--m">
   <gv-radio value="monthly">Monthly</gv-radio>
   <gv-radio value="yearly">Yearly</gv-radio>
@@ -169,7 +169,7 @@ Set the `size` prop to `small` to use smaller radios.
 
 Set the `error-message` prop to display an error.
 
-```vue-html
+```vue
 <gv-radios
   legend="Where do you live?" 
   :legend-is-page-heading="true" 
diff --git a/content/2.components/select.md b/content/2.components/select.md
@@ -9,7 +9,7 @@ The select component allows users to choose an option from a list.
 See the [GOV.UK Design System documentation on selects](https://design-system.service.gov.uk/components/select/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <gv-select label="Sort by">
   <gv-select-option value="published">
     Recently published
@@ -77,7 +77,7 @@ function handleChange() {
 
 You can add a hint using the `hint` prop or slot.
 
-```vue-html
+```vue
 <gv-select
   label="Choose location"
   hint="This can be different to where you went before"
@@ -98,7 +98,7 @@ You can add a hint using the `hint` prop or slot.
 
 Use the `error-message` prop or slot to show an error message if the user has not selected an option for a mandatory select.
 
-```vue-html
+```vue
 <gv-select
   label="Choose location"
   hint="This can be different to where you went before"
diff --git a/content/2.components/skip-link.md b/content/2.components/skip-link.md
@@ -9,7 +9,7 @@ Use the skip link component to help keyboard-only users skip to the main content
 See the [GOV.UK Design System documentation on the skip link](https://design-system.service.gov.uk/components/skip-link/)
 for more information on when to use this component.
 
-```vue-html
+```vue
 <p class="govuk-body">
   To view the skip link component tab to this example, or click inside this example and press tab.
 </p>
@@ -24,7 +24,7 @@ Use the `href` prop to override this. The skip link will jump here when activate
 This component does not support [custom link components](/get-started/using-router-link-or-nuxt-link), such as
 `router-link` or `nuxt-link`, because the link should always jump to a section on the current page.
 
-```vue-html
+```vue
 <p class="govuk-body">
   To view the skip link component tab to this example, or click inside this example and press tab.
 </p>
diff --git a/content/2.components/summary-list.md b/content/2.components/summary-list.md
@@ -9,7 +9,7 @@ Use a summary list to summarise information, for example, a user’s responses a
 See the [GOV.UK Design System documentation on summary lists](https://design-system.service.gov.uk/components/summary-lists/) for
 more information on when to use this component.
 
-```vue-html
+```vue
 <gv-summary-list>
   <gv-summary-list-row key-text="Name" value-text="Sarah Philips">
     <template #actions>
@@ -48,7 +48,7 @@ more information on when to use this component.
 You can remove the borders from a summary list with `:show-borders="false"` and from individual rows with 
 `:show-borders="false"`. You should only do this if the list doesn't have actions.
 
-```vue-html
+```vue
 <gv-summary-list :show-borders="false">
   <gv-summary-list-row key-text="Name" value-text="Sarah Philips"/>
   <gv-summary-list-row key-text="Date of birth" value-text="5 January 1978"/>
diff --git a/content/2.components/table.md b/content/2.components/table.md
diff --git a/content/2.components/tabs.md b/content/2.components/tabs.md
diff --git a/content/2.components/tag.md b/content/2.components/tag.md
diff --git a/content/2.components/text-input.md b/content/2.components/text-input.md
diff --git a/content/2.components/textarea.md b/content/2.components/textarea.md
diff --git a/content/2.components/warning-text.md b/content/2.components/warning-text.md
diff --git a/server/plugins/content.ts b/server/plugins/content.ts
