docs: switch to fenced codeblocks (#31806)

site/content/docs/5.0/utilities/flex.md

@@ -113,14 +113,14 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex justify-content-start">...</div>
 <div class="d-flex justify-content-end">...</div>
 <div class="d-flex justify-content-center">...</div>
 <div class="d-flex justify-content-between">...</div>
 <div class="d-flex justify-content-around">...</div>
 <div class="d-flex justify-content-evenly">...</div>
-{{< /highlight >}}
+```
 
 Responsive variations also exist for `justify-content`.
 
@@ -169,13 +169,13 @@ Use `align-items` utilities on flexbox containers to change the alignment of fle
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-items-start">...</div>
 <div class="d-flex align-items-end">...</div>
 <div class="d-flex align-items-center">...</div>
 <div class="d-flex align-items-baseline">...</div>
 <div class="d-flex align-items-stretch">...</div>
-{{< /highlight >}}
+```
 
 Responsive variations also exist for `align-items`.
 
@@ -223,13 +223,13 @@ Use `align-self` utilities on flexbox items to individually change their alignme
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="align-self-start">Aligned flex item</div>
 <div class="align-self-end">Aligned flex item</div>
 <div class="align-self-center">Aligned flex item</div>
 <div class="align-self-baseline">Aligned flex item</div>
 <div class="align-self-stretch">Aligned flex item</div>
-{{< /highlight >}}
+```
 
 Responsive variations also exist for `align-self`.
 
@@ -355,11 +355,11 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex flex-nowrap">
   ...
 </div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="d-flex flex-wrap bd-highlight">
@@ -381,11 +381,11 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex flex-wrap">
   ...
 </div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="d-flex flex-wrap-reverse bd-highlight">
@@ -407,11 +407,11 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex flex-wrap-reverse">
   ...
 </div>
-{{< /highlight >}}
+```
 
 
 Responsive variations also exist for `flex-wrap`.
@@ -488,11 +488,11 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-content-start flex-wrap">
   ...
 </div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="d-flex align-content-end flex-wrap bd-highlight mb-3" style="height: 200px">
@@ -514,9 +514,9 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-content-end flex-wrap">...</div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="d-flex align-content-center flex-wrap bd-highlight mb-3" style="height: 200px">
@@ -538,9 +538,9 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-content-center flex-wrap">...</div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="d-flex align-content-between flex-wrap bd-highlight mb-3" style="height: 200px">
@@ -562,9 +562,9 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-content-between flex-wrap">...</div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="d-flex align-content-around flex-wrap bd-highlight mb-3" style="height: 200px">
@@ -586,9 +586,9 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-content-around flex-wrap">...</div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="d-flex align-content-stretch flex-wrap bd-highlight mb-3" style="height: 200px">
@@ -610,9 +610,9 @@ Use `align-content` utilities on flexbox containers to align flex items *togethe
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-content-stretch flex-wrap">...</div>
-{{< /highlight >}}
+```
 
 Responsive variations also exist for `align-content`.
 

site/content/docs/5.0/utilities/overflow.md

@@ -22,11 +22,11 @@ Adjust the `overflow` property on the fly with four default values and classes.
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="overflow-auto">...</div>
 <div class="overflow-hidden">...</div>
 <div class="overflow-visible">...</div>
 <div class="overflow-scroll">...</div>
-{{< /highlight >}}
+```
 
 Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`.

site/content/docs/5.0/utilities/position.md

@@ -10,13 +10,13 @@ toc: true
 
 Quick positioning classes are available, though they are not responsive.
 
-{{< highlight html >}}
+```html
 <div class="position-static">...</div>
 <div class="position-relative">...</div>
 <div class="position-absolute">...</div>
 <div class="position-fixed">...</div>
 <div class="position-sticky">...</div>
-{{< /highlight >}}
+```
 
 ## Arrange elements
 

site/content/docs/5.0/utilities/sizing.md

@@ -44,9 +44,9 @@ You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
 
 You can also use utilities to set the width and height relative to the viewport.
 
-{{< highlight html >}}
+```html
 <div class="min-vw-100">Min-width 100vw</div>
 <div class="min-vh-100">Min-height 100vh</div>
 <div class="vw-100">Width 100vw</div>
 <div class="vh-100">Height 100vh</div>
-{{< /highlight >}}
+```

site/content/docs/5.0/utilities/spacing.md

@@ -47,7 +47,7 @@ Where *size* is one of:
 
 Here are some representative examples of these classes:
 
-{{< highlight scss >}}
+```scss
 .mt-0 {
   margin-top: 0 !important;
 }
@@ -64,7 +64,7 @@ Here are some representative examples of these classes:
 .p-3 {
   padding: $spacer !important;
 }
-{{< /highlight >}}
+```
 
 ### Horizontal centering
 
@@ -76,11 +76,11 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="mx-auto" style="width: 200px;">
   Centered element
 </div>
-{{< /highlight >}}
+```
 
 ### Negative margin
 
@@ -88,8 +88,8 @@ In CSS, `margin` properties can utilize negative values (`padding` cannot). Thes
 
 The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`:
 
-{{< highlight scss >}}
+```scss
 .mt-n1 {
   margin-top: -0.25rem !important;
 }
-{{< /highlight >}}
+```

site/content/docs/5.0/utilities/visibility.md

@@ -13,12 +13,12 @@ Elements with the `.invisible` class will be hidden *both* visually and for assi
 
 Apply `.visible` or `.invisible` as needed.
 
-{{< highlight html >}}
+```html
 <div class="visible">...</div>
 <div class="invisible">...</div>
-{{< /highlight >}}
+```
 
-{{< highlight scss >}}
+```scss
 // Class
 .visible {
   visibility: visible !important;
@@ -26,4 +26,4 @@ Apply `.visible` or `.invisible` as needed.
 .invisible {
   visibility: hidden !important;
 }
-{{< /highlight >}}
+```