Change non-SFC code blocks to vue-html for correct highlighting

matteason · matteason · commit 2a555e871ab4 · 2023-08-05T13:31:19.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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <gv-button variant="secondary">
   Find address
 </gv-button>
 ```
 
-```vue
+```vue-html
 <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
+```vue-html
 <gv-button-group>
   <gv-button>
     Save and continue
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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <gv-error-message>Enter your date of birth</gv-error-message>
 ```
 
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
+```vue-html
 <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
+```vue-html
 <gv-file-upload label="Upload a file"/>
 ```
 
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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <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
+```vue-html
 <gv-radios
   legend="Where do you live?" 
   :legend-is-page-heading="true" 
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
+```vue-html
 <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
+```vue-html
 <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
@@ -9,7 +9,7 @@ Use the table component to make information easier to compare and scan for users
 See the [GOV.UK Design System documentation on tables](https://design-system.service.gov.uk/components/table/)
 for more information on when to use this component.
 
-```vue
+```vue-html
 <gv-table caption="Dates and amounts">
   <gv-table-head>
     <gv-table-row>
@@ -38,7 +38,7 @@ for more information on when to use this component.
 
 Shorthand aliases are available to make your code closer to HTML and more succinct.
 
-```vue
+```vue-html
 <gv-table caption="GOV.UK Vue table components">
   <gv-thead>
     <gv-tr>
diff --git a/content/2.components/tabs.md b/content/2.components/tabs.md
@@ -9,7 +9,7 @@ The tabs component lets users navigate between related sections of content, disp
 See the [GOV.UK Design System documentation on tabs](https://design-system.service.gov.uk/components/tabs/) for
 more information on when to use this component.
 
-```vue
+```vue-html
 <gv-tabs title="Cases opened">
   <gv-tab label="Past day">
     <h2 class="govuk-heading-l">Past day</h2>
diff --git a/content/2.components/tag.md b/content/2.components/tag.md
@@ -8,7 +8,7 @@ Use the tag component to show users the status of something.
 
 See the [GOV.UK Design System documentation on tags](https://design-system.service.gov.uk/components/tag/) for more information on when to use this component.
 
-```vue
+```vue-html
 <gv-tag>completed</gv-tag>
 ```
 
diff --git a/content/2.components/text-input.md b/content/2.components/text-input.md
@@ -76,7 +76,7 @@ const eventName = ref('')
 
 You can pass any of the GOV.UK input size modifier classes via `class`.
 
-```vue
+```vue-html
 <gv-input label="5 character width" class="govuk-input--width-5" />
 <gv-input label="One-half width" class="govuk-!-width-one-half" />
 ```
@@ -85,7 +85,7 @@ You can pass any of the GOV.UK input size modifier classes via `class`.
 
 If you’re asking the user to enter a whole number, set the `inputmode` prop to `numeric` to use the numeric keypad on devices with on-screen keyboards.
 
-```vue
+```vue-html
 <gv-input :label-is-page-heading="true" label-class="govuk-label--l" inputmode="numeric" :spellcheck="false" class="govuk-input--width-10">
   <template #label>
     What is your account number?
diff --git a/content/2.components/textarea.md b/content/2.components/textarea.md
@@ -9,7 +9,7 @@ Use the textarea component when you need to let users enter an amount of text th
 See the [GOV.UK Design System documentation on textareas](https://design-system.service.gov.uk/components/textarea/) for
 more information on when to use this component.
 
-```vue
+```vue-html
 <gv-textarea label="Can you provide more detail?" :label-is-page-heading="true" label-class="govuk-label--l">
   <template #hint>
     Do not include personal or financial information, like your National Insurance number or credit card details. 
@@ -49,7 +49,7 @@ function handleKeyDown() {
 You can change the height of the textarea using the `rows` prop. This prop accepts a number, not a string, so should
 be set with `v-bind` or `:`.
 
-```vue
+```vue-html
 <gv-textarea 
   label="Can you provide more detail?" 
   :label-is-page-heading="true" 
@@ -66,7 +66,7 @@ be set with `v-bind` or `:`.
 
 Set the `error-message` prop to display an error.
 
-```vue
+```vue-html
 <gv-textarea 
   label="Can you provide more detail?" 
   :label-is-page-heading="true" 
diff --git a/content/2.components/warning-text.md b/content/2.components/warning-text.md
@@ -8,7 +8,7 @@ Use the warning text component when you need to warn users about something impor
 
 See the [GOV.UK Design System documentation on warning text](https://design-system.service.gov.uk/components/warning-text/) for more information on when to use this component.
 
-```vue
+```vue-html
 <gv-warning-text>
   You can be fined up to £5,000 if you do not register
 </gv-warning-text>
@@ -19,7 +19,7 @@ See the [GOV.UK Design System documentation on warning text](https://design-syst
 This component includes visually hidden text at the start to provide context to screen reader users who may not be able to see the icon.
 The default is 'Warning', but you can change it with the `iconFallbackText` prop - for example, for localisation:
 
-```vue
+```vue-html
 <gv-warning-text icon-fallback-text="Rhybudd">
   Gallwch gael dirwy o hyd at £5,000 os na fyddwch yn cofrestru.
 </gv-warning-text>
diff --git a/server/plugins/content.ts b/server/plugins/content.ts
