docs: switch to fenced codeblocks (#31806)

43 files changed, 494 insertions, 446 deletions

diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md
index 994c5b1a6b..3eecceea28 100644
--- a/site/content/docs/5.0/components/alerts.md
+++ b/site/content/docs/5.0/components/alerts.md
@@ -80,18 +80,18 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 Enable dismissal of an alert via JavaScript:
 
-{{< highlight js >}}
+```js
 var alertList = document.querySelectorAll('.alert')
 alertList.forEach(function (alert) {
   new bootstrap.Alert(alert)
 })
-{{< /highlight >}}
+```
 
 Or with `data` attributes on a button **within the alert**, as demonstrated above:
 
-{{< highlight html >}}
+```html
 <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
-{{< /highlight >}}
+```
 
 Note that closing an alert will remove it from the DOM.
 
@@ -99,10 +99,10 @@ Note that closing an alert will remove it from the DOM.
 
 You can create an alert instance with the alert constructor, for example:
 
-{{< highlight js >}}
+```js
 var myAlert = document.getElementById('myAlert')
 var bsAlert = new bootstrap.Alert(myAlert)
-{{< /highlight >}}
+```
 
 This makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
 
@@ -141,11 +141,11 @@ This makes an alert listen for click events on descendant elements which have th
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var alertNode = document.querySelector('.alert')
 var alert = bootstrap.Alert.getInstance(alertNode)
 alert.close()
-{{< /highlight >}}
+```
 
 ### Events
 
@@ -174,11 +174,11 @@ Bootstrap's alert plugin exposes a few events for hooking into alert functionali
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myAlert = document.getElementById('myAlert')
 myAlert.addEventListener('closed.bs.alert', function () {
   // do something, for instance, explicitly move focus to the most appropriate element,
   // so it doesn't get lost/reset to the start of the page
   // document.getElementById('...').focus()
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.0/components/button-group.md
index 730faf2db2..7a5992bbc7 100644
--- a/site/content/docs/5.0/components/button-group.md
+++ b/site/content/docs/5.0/components/button-group.md
@@ -163,11 +163,11 @@ Instead of applying button sizing classes to every button in a group, just add `
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
 <div class="btn-group" role="group" aria-label="...">...</div>
 <div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
-{{< /highlight >}}
+```
 
 ## Nesting
 
@@ -261,8 +261,8 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="btn-group-vertical">
   ...
 </div>
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md
index 4b4522ab77..845aba7224 100644
--- a/site/content/docs/5.0/components/buttons.md
+++ b/site/content/docs/5.0/components/buttons.md
@@ -129,10 +129,10 @@ Add `data-toggle="button"` to toggle a button's `active` state. If you're pre-to
 
 You can create a button instance with the button constructor, for example:
 
-{{< highlight js >}}
+```js
 var button = document.getElementById('myButton')
 var bsButton = new bootstrap.Button(button)
-{{< /highlight >}}
+```
 
 <table class="table">
   <thead>
@@ -163,10 +163,10 @@ var bsButton = new bootstrap.Button(button)
 
 For example, to toggle all buttons
 
-{{< highlight js >}}
+```js
 var buttons = document.querySelectorAll('.btn')
 buttons.forEach(function (button) {
   var button = new bootstrap.Button(button)
   button.toggle()
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md
index c478cbfadc..fbfbff4d5d 100644
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.0/components/carousel.md
@@ -263,10 +263,10 @@ The `data-ride="carousel"` attribute is used to mark a carousel as animating sta
 
 Call carousel manually with:
 
-{{< highlight js >}}
+```js
 var myCarousel = document.querySelector('#myCarousel')
 var carousel = new bootstrap.Carousel(myCarousel)
-{{< /highlight >}}
+```
 
 ### Options
 
@@ -330,13 +330,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
 
-{{< highlight js >}}
+```js
 var myCarousel = document.querySelector('#myCarousel')
 var carousel = new bootstrap.Carousel(myCarousel, {
   interval: 2000,
   wrap: false
 })
-{{< /highlight >}}
+```
 
 <table class="table">
   <thead>
@@ -411,13 +411,13 @@ All carousel events are fired at the carousel itself (i.e. at the `<div class="c
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myCarousel = document.getElementById('myCarousel')
 
 myCarousel.addEventListener('slide.bs.carousel', function () {
   // do something...
 })
-{{< /highlight >}}
+```
 
 ### Change transition duration
 
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md
index a6109e7f3e..c460f6b9a4 100644
--- a/site/content/docs/5.0/components/collapse.md
+++ b/site/content/docs/5.0/components/collapse.md
@@ -149,12 +149,12 @@ To add accordion-like group management to a collapsible area, add the data attri
 
 Enable manually with:
 
-{{< highlight js >}}
+```js
 var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
 var collapseList = collapseElementList.map(function (collapseEl) {
   return new bootstrap.Collapse(collapseEl)
 })
-{{< /highlight >}}
+```
 
 ### Options
 
@@ -195,12 +195,12 @@ Activates your content as a collapsible element. Accepts an optional options `ob
 
 You can create a collapse instance with the constructor, for example:
 
-{{< highlight js >}}
+```js
 var myCollapse = document.getElementById('myCollapse')
 var bsCollapse = new bootstrap.Collapse(myCollapse, {
   toggle: false
 })
-{{< /highlight >}}
+```
 
 <table class="table">
   <thead>
@@ -264,9 +264,9 @@ Bootstrap's collapse class exposes a few events for hooking into collapse functi
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myCollapsible = document.getElementById('myCollapsible')
 myCollapsible.addEventListener('hidden.bs.collapse', function () {
   // do something...
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index ee6182f297..827cc2c747 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -122,7 +122,7 @@ The best part is you can do this with any button variant, too:
   </div><!-- /btn-group -->
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Example single danger button -->
 <div class="btn-group">
   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
@@ -136,7 +136,7 @@ The best part is you can do this with any button variant, too:
     <li><a class="dropdown-item" href="#">Separated link</a></li>
   </ul>
 </div>
-{{< /highlight >}}
+```
 
 ### Split button
 
@@ -225,7 +225,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
   </div><!-- /btn-group -->
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Example split danger button -->
 <div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
@@ -240,7 +240,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
     <li><a class="dropdown-item" href="#">Separated link</a></li>
   </ul>
 </div>
-{{< /highlight >}}
+```
 
 ## Sizing
 
@@ -274,7 +274,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Large button groups (default and split) -->
 <div class="btn-group">
   <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
@@ -295,7 +295,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     ...
   </ul>
 </div>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <div class="btn-group">
@@ -325,7 +325,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
   </div>
 </div>
 
-{{< highlight html >}}
+```
 <div class="btn-group">
   <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
     Small button
@@ -345,7 +345,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
     ...
   </ul>
 </div>
-{{< /highlight >}}
+```
 
 ## Dark dropdowns
 
@@ -429,7 +429,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Default dropup button -->
 <div class="btn-group dropup">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
@@ -452,7 +452,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
     <!-- Dropdown menu links -->
   </ul>
 </div>
-{{< /highlight >}}
+```
 
 ### Dropright
 
@@ -488,7 +488,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Default dropright button -->
 <div class="btn-group dropright">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
@@ -511,7 +511,7 @@ Trigger dropdown menus at the right of the elements by adding `.dropright` to th
     <!-- Dropdown menu links -->
   </ul>
 </div>
-{{< /highlight >}}
+```
 
 ### Dropleft
 
@@ -549,7 +549,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Default dropleft button -->
 <div class="btn-group dropleft">
   <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
@@ -574,7 +574,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropleft` to the
     Split dropleft
   </button>
 </div>
-{{< /highlight >}}
+```
 
 ## Menu items
 
@@ -825,7 +825,7 @@ On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to
 
 Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
 
-{{< highlight html >}}
+```html
 <div class="dropdown">
   <button id="dLabel" type="button" data-toggle="dropdown" aria-expanded="false">
     Dropdown trigger
@@ -834,18 +834,18 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
     ...
   </ul>
 </div>
-{{< /highlight >}}
+```
 
 ### Via JavaScript
 
 Call the dropdowns via JavaScript:
 
-{{< highlight js >}}
+```js
 var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
 var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
   return new bootstrap.Dropdown(dropdownToggleEl)
 })
-{{< /highlight >}}
+```
 
 {{< callout info >}}
 ##### `data-toggle="dropdown"` still required
@@ -1009,9 +1009,9 @@ All dropdown events are fired at the `.dropdown-menu`'s parent element and have
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myDropdown = document.getElementById('myDropdown')
 myDropdown.addEventListener('show.bs.dropdown', function () {
   // do something...
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md
index a82bdddf79..fa576cd661 100644
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.0/components/list-group.md
@@ -288,7 +288,7 @@ Use the tab JavaScript plugin—include it individually or through the compiled
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="row">
   <div class="col-4">
     <div class="list-group" id="list-tab" role="tablist">
@@ -307,14 +307,14 @@ Use the tab JavaScript plugin—include it individually or through the compiled
     </div>
   </div>
 </div>
-{{< /highlight >}}
+```
 
 ### Using data attributes
 
 You can activate a list group navigation without writing any JavaScript by simply specifying `data-toggle="list"` or on an element. Use these data attributes on `.list-group-item`.
 
 <div role="tabpanel">
-{{< highlight html >}}
+```html
 <!-- List group -->
 <div class="list-group" id="myList" role="tablist">
   <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
@@ -330,14 +330,14 @@ You can activate a list group navigation without writing any JavaScript by simpl
   <div class="tab-pane" id="messages" role="tabpanel">...</div>
   <div class="tab-pane" id="settings" role="tabpanel">...</div>
 </div>
-{{< /highlight >}}
+```
 </div>
 
 ### Via JavaScript
 
 Enable tabbable list item via JavaScript (each list item needs to be activated individually):
 
-{{< highlight js >}}
+```js
 var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
 triggerTabList.forEach(function (triggerEl) {
   var tabTrigger = new bootstrap.Tab(triggerEl)
@@ -347,30 +347,30 @@ triggerTabList.forEach(function (triggerEl) {
     tabTrigger.show()
   })
 })
-{{< /highlight >}}
+```
 
 You can activate individual list item in several ways:
 
-{{< highlight js >}}
+```js
 var triggerEl = document.querySelector('#myTab a[href="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
 var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
 bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
-{{< /highlight >}}
+```
 
 ### Fade effect
 
 To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
 
-{{< highlight html >}}
+```html
 <div class="tab-content">
   <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
   <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
   <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
   <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
 </div>
-{{< /highlight >}}
+```
 
 ### Methods
 
@@ -378,7 +378,7 @@ To make tabs panel fade in, add `.fade` to each `.tab-pane`. The first tab pane
 
 Activates a list item element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
 
-{{< highlight html >}}
+```html
 <div class="list-group" id="myList" role="tablist">
   <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
   <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
@@ -399,18 +399,18 @@ Activates a list item element and content container. Tab should have either a `d
 
   firstTab.show()
 </script>
-{{< /highlight >}}
+```
 
 #### show
 
 Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (for example, before the `shown.bs.tab` event occurs).
 
-{{< highlight js >}}
+```js
   var someListItemEl = document.querySelector('#someListItem')
   var tab = new bootstrap.Tab(someListItemEl)
 
   tab.show()
-{{< /highlight >}}
+```
 
 #### dispose
 
@@ -420,10 +420,10 @@ Destroys an element's tab.
 
 *Static* method which allows you to get the tab instance associated with a DOM element
 
-{{< highlight js >}}
+```js
 var triggerEl = document.querySelector('#trigger')
 var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
-{{< /highlight >}}
+```
 
 ### Events
 
@@ -463,10 +463,10 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var tabEl = document.querySelector('a[data-toggle="list"]')
 tabEl.addEventListener('shown.bs.tab', function (e) {
   e.target // newly activated tab
   e.relatedTarget // previous active tab
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index 8064999ec9..542f535bc2 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -17,14 +17,14 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
 - Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}}) for details.
 - Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
 
-{{< highlight js >}}
+```js
 var myModal = document.getElementById('myModal')
 var myInput = document.getElementById('myInput')
 
 myModal.addEventListener('shown.bs.modal', function () {
   myInput.focus()
 })
-{{< /highlight >}}
+```
 
 {{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
@@ -58,7 +58,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="modal" tabindex="-1">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -76,7 +76,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
     </div>
   </div>
 </div>
-{{< /highlight >}}
+```
 
 ### Live demo
 
@@ -106,7 +106,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
   </button>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Button trigger modal -->
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
   Launch demo modal
@@ -130,7 +130,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
     </div>
   </div>
 </div>
-{{< /highlight >}}
+```
 
 ### Static backdrop
 
@@ -160,7 +160,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
   </button>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Button trigger modal -->
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
   Launch static backdrop modal
@@ -184,7 +184,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
     </div>
   </div>
 </div>
-{{< /highlight >}}
+```
 
 
 ### Scrolling long content
@@ -275,12 +275,12 @@ You can also create a scrollable modal that allows scroll the modal body by addi
   </button>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Scrollable modal -->
 <div class="modal-dialog modal-dialog-scrollable">
   ...
 </div>
-{{< /highlight >}}
+```
 
 ### Vertically centered
 
@@ -335,7 +335,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
   </button>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Vertically centered modal -->
 <div class="modal-dialog modal-dialog-centered">
   ...
@@ -345,7 +345,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
   ...
 </div>
-{{< /highlight >}}
+```
 
 ### Tooltips and popovers
 
@@ -379,7 +379,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
   </button>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="modal-body">
   <h5>Popover in a modal</h5>
   <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
@@ -387,7 +387,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
   <h5>Tooltips in a modal</h5>
   <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
 </div>
-{{< /highlight >}}
+```
 
 ### Using the grid
 
@@ -442,7 +442,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
 </button>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="modal-body">
   <div class="container-fluid">
     <div class="row">
@@ -471,7 +471,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
     </div>
   </div>
 </div>
-{{< /highlight >}}
+```
 
 ### Varying modal content
 
@@ -512,7 +512,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
 </div>
 {{< /example >}}
 
-{{< highlight js >}}
+```js
 var exampleModal = document.getElementById('exampleModal')
 exampleModal.addEventListener('show.bs.modal', function (event) {
   // Button that triggered the modal
@@ -529,7 +529,7 @@ exampleModal.addEventListener('show.bs.modal', function (event) {
   modalTitle.textContent = 'New message to ' + recipient
   modalBodyInput.value = recipient
 })
-{{< /highlight >}}
+```
 
 ### Change animation
 
@@ -541,11 +541,11 @@ If you want for example a zoom-in animation, you can set `$modal-fade-transform:
 
 For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
 
-{{< highlight html >}}
+```html
 <div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
   ...
 </div>
-{{< /highlight >}}
+```
 
 ### Dynamic heights
 
@@ -603,11 +603,11 @@ Our default modal without modifier class constitutes the "medium" size modal.
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalSm">Small modal</button>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="modal-dialog modal-xl">...</div>
 <div class="modal-dialog modal-lg">...</div>
 <div class="modal-dialog modal-sm">...</div>
-{{< /highlight >}}
+```
 
 <div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
   <div class="modal-dialog modal-xl">
@@ -699,12 +699,12 @@ Another override is the option to pop up a modal that covers the user viewport,
   <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
 </div>
 
-{{< highlight html >}}
+```html
 <!-- Full screen modal -->
 <div class="modal-dialog modal-fullscreen-sm-down">
   ...
 </div>
-{{< /highlight >}}
+```
 
 <div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
   <div class="modal-dialog modal-fullscreen">
@@ -833,17 +833,17 @@ The modal plugin toggles your hidden content on demand, via data attributes or J
 
 Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
 
-{{< highlight html >}}
+```html
 <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
-{{< /highlight >}}
+```
 
 ### Via JavaScript
 
 Create a modal with a single line of JavaScript:
 
-{{< highlight js >}}
+```js
 var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
-{{< /highlight >}}
+```
 
 ### Options
 
@@ -896,50 +896,60 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 Activates your content as a modal. Accepts an optional options `object`.
 
-{{< highlight js >}}
+```js
 var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
   keyboard: false
 })
-{{< /highlight >}}
+```
 
 #### toggle
 
 Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
 
-{{< highlight js >}}myModal.toggle(){{< /highlight >}}
+```js
+myModal.toggle()
+```
 
 #### show
 
 Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
 
-{{< highlight js >}}myModal.show(){{< /highlight >}}
+```js
+myModal.show()
+```
 
 #### hide
 
 Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
 
-{{< highlight js >}}myModal.hide(){{< /highlight >}}
+```js
+myModal.hide()
+```
 
 #### handleUpdate
 
 Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
 
-{{< highlight js >}}myModal.handleUpdate(){{< /highlight >}}
+```js
+myModal.handleUpdate()
+```
 
 #### dispose
 
 Destroys an element's modal. (Removes stored data on the DOM element)
 
-{{< highlight js >}}myModal.dispose(){{< /highlight >}}
+```js
+myModal.dispose()
+```
 
 #### getInstance
 
 *Static* method which allows you to get the modal instance associated with a DOM element
 
-{{< highlight js >}}
+```js
 var myModalEl = document.getElementById('myModal')
 var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
-{{< /highlight >}}
+```
 
 ### Events
 
@@ -976,9 +986,9 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myModalEl = document.getElementById('myModal')
 myModalEl.addEventListener('hidden.bs.modal', function (e) {
   // do something...
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.0/components/navbar.md
index b6c44dbbf5..2bc21533bd 100644
--- a/site/content/docs/5.0/components/navbar.md
+++ b/site/content/docs/5.0/components/navbar.md
@@ -403,7 +403,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
   </nav>
 </div>
 
-{{< highlight html >}}
+```html
 <nav class="navbar navbar-dark bg-dark">
   <!-- Navbar content -->
 </nav>
@@ -415,7 +415,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
   <!-- Navbar content -->
 </nav>
-{{< /highlight >}}
+```
 
 ## Containers
 
diff --git a/site/content/docs/5.0/components/navs.md b/site/content/docs/5.0/components/navs.md
index ac733e64c1..0e74443f7c 100644
--- a/site/content/docs/5.0/components/navs.md
+++ b/site/content/docs/5.0/components/navs.md
@@ -336,7 +336,7 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
     <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
@@ -353,7 +353,7 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
   <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
 </div>
-{{< /highlight >}}
+```
 
 To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using `<nav>`, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it.
 
@@ -378,7 +378,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <nav>
   <div class="nav nav-tabs" id="nav-tab" role="tablist">
     <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
@@ -391,7 +391,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
   <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
   <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
 </div>
-{{< /highlight >}}
+```
 
 The tabs plugin also works with pills.
 
@@ -420,7 +420,7 @@ The tabs plugin also works with pills.
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
   <li class="nav-item" role="presentation">
     <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
@@ -437,7 +437,7 @@ The tabs plugin also works with pills.
   <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
   <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
 </div>
-{{< /highlight >}}
+```
 
 And with vertical pills.
 
@@ -466,7 +466,7 @@ And with vertical pills.
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="d-flex align-items-start">
   <div class="nav flex-column nav-pills mr-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
     <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
@@ -481,13 +481,13 @@ And with vertical pills.
     <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
   </div>
 </div>
-{{< /highlight >}}
+```
 
 ### Using data attributes
 
 You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Use these data attributes on `.nav-tabs` or `.nav-pills`.
 
-{{< highlight html >}}
+```html
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
@@ -511,13 +511,13 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
   <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
   <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
 </div>
-{{< /highlight >}}
+```
 
 ### Via JavaScript
 
 Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
 
-{{< highlight js >}}
+```js
 var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
 triggerTabList.forEach(function (triggerEl) {
   var tabTrigger = new bootstrap.Tab(triggerEl)
@@ -527,30 +527,30 @@ triggerTabList.forEach(function (triggerEl) {
     tabTrigger.show()
   })
 })
-{{< /highlight >}}
+```
 
 You can activate individual tabs in several ways:
 
-{{< highlight js >}}
+```js
 var triggerEl = document.querySelector('#myTab a[href="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
 var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
 bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
-{{< /highlight >}}
+```
 
 ### Fade effect
 
 To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must also have `.show` to make the initial content visible.
 
-{{< highlight html >}}
+```html
 <div class="tab-content">
   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
   <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
   <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
 </div>
-{{< /highlight >}}
+```
 
 ### Methods
 
@@ -562,7 +562,7 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the DOM.
 
-{{< highlight html >}}
+```html
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
     <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
@@ -591,18 +591,18 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
   firstTab.show()
 </script>
-{{< /highlight >}}
+```
 
 #### show
 
 Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. **Returns to the caller before the tab pane has actually been shown** (i.e. before the `shown.bs.tab` event occurs).
 
-{{< highlight js >}}
+```js
   var someTabTriggerEl = document.querySelector('#someTabTrigger')
   var tab = new bootstrap.Tab(someTabTriggerEl)
 
   tab.show()
-{{< /highlight >}}
+```
 
 #### dispose
 
@@ -612,10 +612,10 @@ Destroys an element's tab.
 
 *Static* method which allows you to get the tab instance associated with a DOM element
 
-{{< highlight js >}}
+```js
 var triggerEl = document.querySelector('#trigger')
 var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
-{{< /highlight >}}
+```
 
 ### Events
 
@@ -655,10 +655,10 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var tabEl = document.querySelector('a[data-toggle="tab"]')
 tabEl.addEventListener('shown.bs.tab', function (e) {
   e.target // newly activated tab
   e.relatedTarget // previous active tab
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md
index ed7dfb1b2d..cd5e607c5d 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.0/components/popovers.md
@@ -31,22 +31,22 @@ Keep reading to see how popovers work with some examples.
 
 One way to initialize all popovers on a page would be to select them by their `data-toggle` attribute:
 
-{{< highlight js >}}
+```js
 var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
 var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
   return new bootstrap.Popover(popoverTriggerEl)
 })
-{{< /highlight >}}
+```
 
 ## Example: Using the `container` option
 
 When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead.
 
-{{< highlight js >}}
+```js
 var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
   container: 'body'
 })
-{{< /highlight >}}
+```
 
 ## Example
 
@@ -75,7 +75,7 @@ Four options are available: top, right, bottom, and left aligned.
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on top
 </button>
@@ -92,7 +92,7 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
 <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
   Popover on left
 </button>
-{{< /highlight >}}
+```
 
 ### Dismiss on next click
 
@@ -108,11 +108,11 @@ For proper cross-browser and cross-platform behavior, you must use the `<a>` tag
 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
 {{< /example >}}
 
-{{< highlight js >}}
+```js
 var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
   trigger: 'focus'
 })
-{{< /highlight >}}
+```
 
 ### Disabled elements
 
@@ -130,10 +130,10 @@ For disabled popover triggers, you may also prefer `data-trigger="hover"` so tha
 
 Enable popovers via JavaScript:
 
-{{< highlight js >}}
+```js
 var exampleEl = document.getElementById('example')
 var popover = new bootstrap.Popover(exampleEl, options)
-{{< /highlight >}}
+```
 
 {{< callout warning >}}
 ### Making popovers work for keyboard and assistive technology users
@@ -307,58 +307,74 @@ Options for individual popovers can alternatively be specified through the use o
 
 Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed.
 
-{{< highlight js >}}myPopover.show(){{< /highlight >}}
+```js
+myPopover.show()
+```
 
 #### hide
 
 Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
 
-{{< highlight js >}}myPopover.hide(){{< /highlight >}}
+```js
+myPopover.hide()
+```
 
 #### toggle
 
 Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover.
 
-{{< highlight js >}}myPopover.toggle(){{< /highlight >}}
+```js
+myPopover.toggle()
+```
 
 #### dispose
 
 Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
 
-{{< highlight js >}}myPopover.dispose(){{< /highlight >}}
+```js
+myPopover.dispose()
+```
 
 #### enable
 
 Gives an element's popover the ability to be shown. **Popovers are enabled by default.**
 
-{{< highlight js >}}myPopover.enable(){{< /highlight >}}
+```js
+myPopover.enable()
+```
 
 #### disable
 
 Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
 
-{{< highlight js >}}myPopover.disable(){{< /highlight >}}
+```js
+myPopover.disable()
+```
 
 #### toggleEnabled
 
 Toggles the ability for an element's popover to be shown or hidden.
 
-{{< highlight js >}}myPopover.toggleEnabled(){{< /highlight >}}
+```js
+myPopover.toggleEnabled()
+```
 
 #### update
 
 Updates the position of an element's popover.
 
-{{< highlight js >}}myPopover.update(){{< /highlight >}}
+```js
+myPopover.update()
+```
 
 #### getInstance
 
 *Static* method which allows you to get the popover instance associated with a DOM element
 
-{{< highlight js >}}
+```js
 var exampleTriggerEl = document.getElementById('example')
 var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
-{{< /highlight >}}
+```
 
 ### Events
 
@@ -393,9 +409,9 @@ var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Boots
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myPopoverTrigger = document.getElementById('myPopover')
 myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
   // do something...
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.0/components/progress.md
index c41aea4acd..21e6074d0d 100644
--- a/site/content/docs/5.0/components/progress.md
+++ b/site/content/docs/5.0/components/progress.md
@@ -132,8 +132,8 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
   </button>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="progress">
   <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
 </div>
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md
index 2e2a513345..57a12edc47 100644
--- a/site/content/docs/5.0/components/scrollspy.md
+++ b/site/content/docs/5.0/components/scrollspy.md
@@ -63,7 +63,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
   <a class="navbar-brand" href="#">Navbar</a>
   <ul class="nav nav-pills">
@@ -96,7 +96,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
   <h4 id="three">three</h4>
   <p>...</p>
 </div>
-{{< /highlight >}}
+```
 
 ## Example with nested nav
 
@@ -143,7 +143,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <nav id="navbar-example3" class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <nav class="nav nav-pills flex-column">
@@ -177,7 +177,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
   <h5 id="item-3-2">Item 3-2</h5>
   <p>...</p>
 </div>
-{{< /highlight >}}
+```
 
 ## Example with list-group
 
@@ -208,7 +208,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div id="list-example" class="list-group">
   <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
   <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
@@ -225,7 +225,7 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
   <h4 id="list-item-4">Item 4</h4>
   <p>...</p>
 </div>
-{{< /highlight >}}
+```
 
 
 ## Usage
@@ -234,13 +234,13 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
 
 To easily add scrollspy behavior to your topbar navigation, add `data-spy="scroll"` to the element you want to spy on (most typically this would be the `<body>`). Then add the `data-target` attribute with the ID or class of the parent element of any Bootstrap `.nav` component.
 
-{{< highlight css >}}
+```css
 body {
   position: relative;
 }
-{{< /highlight >}}
+```
 
-{{< highlight html >}}
+```html
 <body data-spy="scroll" data-target="#navbar-example">
   ...
   <div id="navbar-example">
@@ -250,17 +250,17 @@ body {
   </div>
   ...
 </body>
-{{< /highlight >}}
+```
 
 ### Via JavaScript
 
 After adding `position: relative;` in your CSS, call the scrollspy via JavaScript:
 
-{{< highlight js >}}
+```js
 var scrollSpy = new bootstrap.ScrollSpy(document.body, {
   target: '#navbar-example'
 })
-{{< /highlight >}}
+```
 
 {{< callout danger >}}
 #### Resolvable ID targets required
@@ -280,13 +280,13 @@ Target elements that are not visible will be ignored and their corresponding nav
 
 When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:
 
-{{< highlight js >}}
+```js
 var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]'))
 dataSpyList.forEach(function (dataSpyEl) {
   bootstrap.ScrollSpy.getInstance(dataSpyEl)
     .refresh()
 })
-{{< /highlight >}}
+```
 
 #### dispose
 
@@ -296,10 +296,10 @@ Destroys an element's scrollspy. (Removes stored data on the DOM element)
 
 *Static* method which allows you to get the scrollspy instance associated with a DOM element
 
-{{< highlight js >}}
+```js
 var scrollSpyContentEl = document.getElementById('content')
 var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
-{{< /highlight >}}
+```
 
 ### Options
 
@@ -353,9 +353,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var firstScrollSpyEl = document.querySelector('[data-spy="scroll"]')
 firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
   // do something...
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 06d4fa37e8..b9b0229326 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -216,11 +216,11 @@ You also need to adapt the `role` and `aria-live` level depending on the content
 
 As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast.
 
-{{< highlight html >}}
+```html
 <div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
   <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
 </div>
-{{< /highlight >}}
+```
 
 When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
 
@@ -244,12 +244,12 @@ When using `autohide: false`, you must add a close button to allow users to dism
 
 Initialize toasts via JavaScript:
 
-{{< highlight js >}}
+```js
 var toastElList = [].slice.call(document.querySelectorAll('.toast'))
 var toastList = toastElList.map(function (toastEl) {
   return new bootstrap.Toast(toastEl, option)
 })
-{{< /highlight >}}
+```
 
 ### Options
 
@@ -299,19 +299,25 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 Reveals an element's toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs).
 You have to manually call this method, instead your toast won't show.
 
-{{< highlight js >}}toast.show(){{< /highlight >}}
+```js
+toast.show()
+```
 
 #### hide
 
 Hides an element's toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`.
 
-{{< highlight js >}}toast.hide(){{< /highlight >}}
+```js
+toast.hide()
+```
 
 #### dispose
 
 Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
 
-{{< highlight js >}}toast.dispose(){{< /highlight >}}
+```js
+toast.dispose()
+```
 
 ### Events
 
@@ -342,9 +348,9 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myToastEl = document.getElementById('myToast')
 myToastEl.addEventListener('hidden.bs.toast', function () {
   // do something...
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md
index a0a6f2a189..ddc1a70c70 100644
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.0/components/tooltips.md
@@ -30,12 +30,12 @@ Got all that? Great, let's see how they work with some examples.
 
 One way to initialize all tooltips on a page would be to select them by their `data-toggle` attribute:
 
-{{< highlight js >}}
+```js
 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
   return new bootstrap.Tooltip(tooltipTriggerEl)
 })
-{{< /highlight >}}
+```
 
 ## Examples
 
@@ -58,7 +58,7 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
   Tooltip on top
 </button>
@@ -71,15 +71,15 @@ Hover over the buttons below to see the four tooltips directions: top, right, bo
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
   Tooltip on left
 </button>
-{{< /highlight >}}
+```
 
 And with custom HTML added:
 
-{{< highlight html >}}
+```html
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
   Tooltip with HTML
 </button>
-{{< /highlight >}}
+```
 
 With an SVG:
 
@@ -98,22 +98,22 @@ The tooltip plugin generates content and markup on demand, and by default places
 
 Trigger the tooltip via JavaScript:
 
-{{< highlight js >}}
+```js
 var exampleEl = document.getElementById('example')
 var tooltip = new bootstrap.Tooltip(exampleEl, options)
-{{< /highlight >}}
+```
 
 {{< callout warning >}}
 ##### Overflow `auto` and `scroll`
 
 Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`:
 
-{{< highlight js >}}
+```js
 var exampleEl = document.getElementById('example')
 var tooltip = new bootstrap.Tooltip(exampleEl, {
   boundary: 'window'
 })
-{{< /highlight >}}
+```
 {{< /callout >}}
 
 ### Markup
@@ -126,7 +126,7 @@ The required markup for a tooltip is only a `data` attribute and `title` on the
 You should only add tooltips to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
 {{< /callout >}}
 
-{{< highlight html >}}
+```html
 <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 
@@ -137,7 +137,7 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
     Some tooltip text!
   </div>
 </div>
-{{< /highlight >}}
+```
 
 ### Disabled elements
 
@@ -314,58 +314,74 @@ Options for individual tooltips can alternatively be specified through the use o
 
 Reveals an element's tooltip. **Returns to the caller before the tooltip has actually been shown** (i.e. before the `shown.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip. Tooltips with zero-length titles are never displayed.
 
-{{< highlight js >}}tooltip.show(){{< /highlight >}}
+```js
+tooltip.show()
+```
 
 #### hide
 
 Hides an element's tooltip. **Returns to the caller before the tooltip has actually been hidden** (i.e. before the `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
 
-{{< highlight js >}}tooltip.hide(){{< /highlight >}}
+```js
+tooltip.hide()
+```
 
 #### toggle
 
 Toggles an element's tooltip. **Returns to the caller before the tooltip has actually been shown or hidden** (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs). This is considered a "manual" triggering of the tooltip.
 
-{{< highlight js >}}tooltip.toggle(){{< /highlight >}}
+```js
+tooltip.toggle()
+```
 
 #### dispose
 
 Hides and destroys an element's tooltip (Removes stored data on the DOM element). Tooltips that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements.
 
-{{< highlight js >}}tooltip.dispose(){{< /highlight >}}
+```js
+tooltip.dispose()
+```
 
 #### enable
 
 Gives an element's tooltip the ability to be shown. **Tooltips are enabled by default.**
 
-{{< highlight js >}}tooltip.enable(){{< /highlight >}}
+```js
+tooltip.enable()
+```
 
 #### disable
 
 Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
 
-{{< highlight js >}}tooltip.disable(){{< /highlight >}}
+```js
+tooltip.disable()
+```
 
 #### toggleEnabled
 
 Toggles the ability for an element's tooltip to be shown or hidden.
 
-{{< highlight js >}}tooltip.toggleEnabled(){{< /highlight >}}
+```js
+tooltip.toggleEnabled()
+```
 
 #### update
 
 Updates the position of an element's tooltip.
 
-{{< highlight js >}}tooltip.update(){{< /highlight >}}
+```js
+tooltip.update()
+```
 
 #### getInstance
 
 *Static* method which allows you to get the tooltip instance associated with a DOM element
 
-{{< highlight js >}}
+```js
 var exampleTriggerEl = document.getElementById('example')
 var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
-{{< /highlight >}}
+```
 
 ### Events
 
@@ -400,7 +416,7 @@ var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Boots
   </tbody>
 </table>
 
-{{< highlight js >}}
+```js
 var myTooltipEl = document.getElementById('myTooltip')
 var tooltip = new bootstrap.Tooltip(myTooltipEl)
 
@@ -409,4 +425,4 @@ myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
 })
 
 tooltip.hide()
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.0/content/images.md
index 53f45de881..8bc1bd71fa 100644
--- a/site/content/docs/5.0/content/images.md
+++ b/site/content/docs/5.0/content/images.md
@@ -47,9 +47,9 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}})
 
 If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
 
-{{< highlight html >}}
+```html
 ​<picture>
   <source srcset="..." type="image/svg+xml">
   <img src="..." class="img-fluid img-thumbnail" alt="...">
 </picture>
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.0/content/reboot.md
index 5ba7cf087a..e1cc011836 100644
--- a/site/content/docs/5.0/content/reboot.md
+++ b/site/content/docs/5.0/content/reboot.md
@@ -31,7 +31,7 @@ The `<html>` and `<body>` elements are updated to provide better page-wide defau
 
 Bootstrap utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
 
-{{< highlight scss >}}
+```scss
 $font-family-sans-serif:
   // Safari for macOS and iOS (San Francisco)
   -apple-system,
@@ -49,7 +49,7 @@ $font-family-sans-serif:
   sans-serif,
   // Emoji fonts
   "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-{{< /highlight >}}
+```
 
 This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
 
@@ -437,9 +437,9 @@ The default `cursor` on summary is `text`, so we reset that to `pointer` to conv
 
 HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.
 
-{{< highlight html >}}
+```html
 <input type="text" hidden>
-{{< /highlight >}}
+```
 
 {{< callout warning >}}
 ##### jQuery incompatibility
diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.0/content/tables.md
index f68e79418f..26f2131728 100644
--- a/site/content/docs/5.0/content/tables.md
+++ b/site/content/docs/5.0/content/tables.md
@@ -134,7 +134,7 @@ Highlight a table row or cell by adding a `.table-active` class.
   </table>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table">
   <thead>
     ...
@@ -153,7 +153,7 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
   <table class="table table-dark">
@@ -187,7 +187,7 @@ Highlight a table row or cell by adding a `.table-active` class.
   </table>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table table-dark">
   <thead>
     ...
@@ -206,7 +206,7 @@ Highlight a table row or cell by adding a `.table-active` class.
     </tr>
   </tbody>
 </table>
-{{< /highlight >}}
+```
 
 ## How do the variants and accented tables work?
 
@@ -289,7 +289,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table table-sm table-dark">
   <div class="table-responsive">
     <table class="table align-middle">
@@ -315,7 +315,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
     </table>
   </div>
 </table>
-{{< /highlight >}}
+```
 
 ## Nesting
 
@@ -378,7 +378,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
 </table>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table table-striped">
   <thead>
     ...
@@ -395,7 +395,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
     ...
   </tbody>
 </table>
-{{< /highlight >}}
+```
 
 ## How nesting works
 
@@ -442,7 +442,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table">
   <thead class="table-light">
     ...
@@ -451,7 +451,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
     ...
   </tbody>
 </table>
-{{< /highlight >}}
+```
 
 <div class="bd-example">
 <table class="table">
@@ -486,7 +486,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table">
   <thead class="table-dark">
     ...
@@ -495,7 +495,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
     ...
   </tbody>
 </table>
-{{< /highlight >}}
+```
 
 
 ### Table foot
@@ -541,7 +541,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
 </table>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table">
   <thead>
     ...
@@ -553,7 +553,7 @@ Similar to tables and dark tables, use the modifier classes `.table-light` or `.
     ...
   </tfoot>
 </table>
-{{< /highlight >}}
+```
 
 ### Captions
 
@@ -566,7 +566,7 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
   </table>
 </div>
 
-{{< highlight html >}}
+```html
 <table class="table table-sm">
   <caption>List of users</caption>
   <thead>
@@ -576,7 +576,7 @@ A `<caption>` functions like a heading for a table. It helps users with screen r
     ...
   </tbody>
 </table>
-{{< /highlight >}}
+```
 
 You can also put the `<caption>` on the top of the table with `.caption-top`.
 
@@ -687,13 +687,13 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="table-responsive">
   <table class="table">
     ...
   </table>
 </div>
-{{< /highlight >}}
+```
 
 ### Breakpoint specific
 
diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.0/content/typography.md
index d6ed1c3eb4..04da124810 100644
--- a/site/content/docs/5.0/content/typography.md
+++ b/site/content/docs/5.0/content/typography.md
@@ -69,14 +69,14 @@ All HTML headings, `<h1>` through `<h6>`, are available.
   </tbody>
 </table>
 
-{{< highlight html >}}
+```html
 <h1>h1. Bootstrap heading</h1>
 <h2>h2. Bootstrap heading</h2>
 <h3>h3. Bootstrap heading</h3>
 <h4>h4. Bootstrap heading</h4>
 <h5>h5. Bootstrap heading</h5>
 <h6>h6. Bootstrap heading</h6>
-{{< /highlight >}}
+```
 
 `.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
 
@@ -113,14 +113,14 @@ Traditional heading elements are designed to work best in the meat of your page
   <div class="display-6">Display 6</div>
 </div>
 
-{{< highlight html >}}
+```html
 <h1 class="display-1">Display 1</h1>
 <h1 class="display-2">Display 2</h1>
 <h1 class="display-3">Display 3</h1>
 <h1 class="display-4">Display 4</h1>
 <h1 class="display-5">Display 5</h1>
 <h1 class="display-6">Display 6</h1>
-{{< /highlight >}}
+```
 
 Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
 
diff --git a/site/content/docs/5.0/customize/color.md b/site/content/docs/5.0/customize/color.md
index 7c51664b76..17e41f6e4f 100644
--- a/site/content/docs/5.0/customize/color.md
+++ b/site/content/docs/5.0/customize/color.md
@@ -97,12 +97,12 @@ Add, remove, or modify values within the map to update how they're used in many
 
 Here's how you can use these in your Sass:
 
-{{< highlight scss >}}
+```scss
 .alpha { color: $purple; }
 .beta {
   color: $yellow-300;
   background-color: $indigo-900;
 }
-{{< /highlight >}}
+```
 
 [Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color` using the `500` color values.
diff --git a/site/content/docs/5.0/customize/components.md b/site/content/docs/5.0/customize/components.md
index 6c774547a0..b512a9036b 100644
--- a/site/content/docs/5.0/customize/components.md
+++ b/site/content/docs/5.0/customize/components.md
@@ -46,9 +46,9 @@ We encourage you to adopt these guidelines when building with Bootstrap to creat
   </div>
 </div>
 
-{{< highlight html >}}
+```html
 <div class="callout">...</div>
-{{< /highlight >}}
+```
 
 In your CSS, you'd have something like the following where the bulk of the styling is done via `.callout`. Then, the unique styles between each variant is controlled via modifier class.
 
diff --git a/site/content/docs/5.0/customize/css-variables.md b/site/content/docs/5.0/customize/css-variables.md
index 12343ed928..a2d0f33b7c 100644
--- a/site/content/docs/5.0/customize/css-variables.md
+++ b/site/content/docs/5.0/customize/css-variables.md
@@ -14,7 +14,7 @@ Bootstrap includes around two dozen [CSS custom properties (variables)](https://
 
 Here are the variables we include (note that the `:root` is required) that can be accessed anywhere Bootstrap's CSS is loaded. They're located in our `_root.scss` file and included in our compiled dist files.
 
-{{< highlight css >}}
+```css
 {{< root.inline >}}
 {{- $css := readFile "dist/css/bootstrap.css" -}}
 {{- $match := findRE ":root {([^}]*)}" $css 1 -}}
@@ -26,7 +26,7 @@ Here are the variables we include (note that the `:root` is required) that can b
 {{- index $match 0 -}}
 
 {{< /root.inline >}}
-{{< /highlight >}}
+```
 
 ## Component variables
 
@@ -40,11 +40,11 @@ We're also using CSS variables across our grids—primarily for gutters—with m
 
 CSS variables offer similar flexibility to Sass's variables, but without the need for compilation before being served to the browser. For example, here we're resetting our page's font and link styles with CSS variables.
 
-{{< highlight css >}}
+```css
 body {
   font: 1rem/1.5 var(--bs-font-sans-serif);
 }
 a {
   color: var(--bs-blue);
 }
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md
index 209ad2152a..46b8225250 100644
--- a/site/content/docs/5.0/customize/sass.md
+++ b/site/content/docs/5.0/customize/sass.md
@@ -12,7 +12,7 @@ Utilize our source Sass files to take advantage of variables, maps, mixins, and
 
 Whenever possible, avoid modifying Bootstrap's core files. For Sass, that means creating your own stylesheet that imports Bootstrap so you can modify and extend it. Assuming you're using a package manager like npm, you'll have a file structure that looks like this:
 
-{{< highlight text >}}
+```text
 your-project/
 ├── scss
 │   └── custom.scss
@@ -20,31 +20,31 @@ your-project/
     └── bootstrap
         ├── js
         └── scss
-{{< /highlight >}}
+```
 
 If you've downloaded our source files and aren't using a package manager, you'll want to manually setup something similar to that structure, keeping Bootstrap's source files separate from your own.
 
-{{< highlight text >}}
+```text
 your-project/
 ├── scss
 │   └── custom.scss
 └── bootstrap/
     ├── js
     └── scss
-{{< /highlight >}}
+```
 
 ## Importing
 
 In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two options: include all of Bootstrap, or pick the parts you need. We encourage the latter, though be aware there are some requirements and dependencies across our components. You also will need to include some JavaScript for our plugins.
 
-{{< highlight scss >}}
+```scss
 // Custom.scss
 // Option A: Include all of Bootstrap
 
 @import "../node_modules/bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```
 
-{{< highlight scss >}}
+```scss
 // Custom.scss
 // Option B: Include parts of Bootstrap
 
@@ -60,7 +60,7 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
 @import "../node_modules/bootstrap/scss/images";
 @import "../node_modules/bootstrap/scss/containers";
 @import "../node_modules/bootstrap/scss/grid";
-{{< /highlight >}}
+```
 
 With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
 
@@ -74,14 +74,14 @@ Variable overrides within the same Sass file can come before or after the defaul
 
 Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
 
-{{< highlight scss >}}
+```scss
 // Your variable overrides
 $body-bg: #000;
 $body-color: #111;
 
 // Bootstrap and its default variables
 @import "../node_modules/bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```
 
 Repeat as necessary for any variable in Bootstrap, including the global options below.
 
@@ -95,25 +95,25 @@ Some of our Sass maps are merged into empty ones by default. This is done to all
 
 All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
 
-{{< highlight scss >}}
+```scss
 $primary: #0074d9;
 $danger: #ff4136;
-{{< /highlight >}}
+```
 
 Later on, theses variables are set in Bootstrap's `$theme-colors` map:
 
-{{< highlight scss >}}
+```scss
 $theme-colors: (
   "primary": $primary,
   "danger": $danger
 );
-{{< /highlight >}}
+```
 
 ### Add to map
 
 Add new colors to `$theme-colors`, or any other map, by creating a new Sass map with your custom values and merging it with the original map. In this case, we'll create a new `$custom-colors` map and merge it with `$theme-colors`.
 
-{{< highlight scss >}}
+```scss
 // Create your own map
 $custom-colors: (
   "custom-color": #900
@@ -121,13 +121,13 @@ $custom-colors: (
 
 // Merge the maps
 $theme-colors: map-merge($theme-colors, $custom-colors);
-{{< /highlight >}}
+```
 
 ### Remove from map
 
 To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aware you must insert it between our requirements and options:
 
-{{< highlight scss >}}
+```scss
 // Required
 @import "../node_modules/bootstrap/scss/functions";
 @import "../node_modules/bootstrap/scss/variables";
@@ -140,7 +140,7 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
 @import "../node_modules/bootstrap/scss/reboot";
 @import "../node_modules/bootstrap/scss/type";
 ...
-{{< /highlight >}}
+```
 
 ## Required keys
 
@@ -154,12 +154,12 @@ For example, we use the `primary`, `success`, and `danger` keys from `$theme-col
 
 Next to the [Sass maps]({{< docsref "/customize/color#color-sass-maps" >}}) we have, theme colors can also be used as standalone variables, like `$primary`.
 
-{{< highlight scss >}}
+```scss
 .custom-element {
   color: $gray-100;
   background-color: $dark;
 }
-{{< /highlight >}}
+```
 
 You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-color()` functions. These functions will mix colors with black or white, unlike Sass' native `lighten()` and `darken()` functions which will change the lightness by a fixed amount, which often doesn't lead to the desired effect.
 
@@ -167,7 +167,7 @@ You can lighten or darken colors with Bootstrap's `tint-color()` and `shade-colo
 
 In practice, you'd call the function and pass in the color and weight parameters.
 
-{{< highlight scss >}}
+```scss
 .custom-element {
   color: tint-color($primary, 10%);
 }
@@ -175,7 +175,7 @@ In practice, you'd call the function and pass in the color and weight parameters
 .custom-element-2 {
   color: shade-color($danger, 30%);
 }
-{{< /highlight >}}
+```
 
 ### Color contrast
 
@@ -185,29 +185,29 @@ An additional function we include in Bootstrap is the color contrast function, `
 
 For example, to generate color swatches from our `$theme-colors` map:
 
-{{< highlight scss >}}
+```scss
 @each $color, $value in $theme-colors {
   .swatch-#{$color} {
     color: color-contrast($value);
   }
 }
-{{< /highlight >}}
+```
 
 It can also be used for one-off contrast needs:
 
-{{< highlight scss >}}
+```scss
 .custom-element {
   color: color-contrast(#000); // returns `color: #fff`
 }
-{{< /highlight >}}
+```
 
 You can also specify a base color with our color map functions:
 
-{{< highlight scss >}}
+```scss
 .custom-element {
   color: color-contrast($dark); // returns `color: #fff`
 }
-{{< /highlight >}}
+```
 
 ### Escape SVG
 
@@ -219,7 +219,7 @@ We use the `add` and `subtract` functions to wrap the CSS `calc` function. The p
 
 Example where the calc is valid:
 
-{{< highlight scss >}}
+```scss
 $border-radius: .25rem;
 $border-width: 1px;
 
@@ -232,11 +232,11 @@ $border-width: 1px;
   // Output the same calc(.25rem - 1px) as above
   border-radius: subtract($border-radius, $border-width);
 }
-{{< /highlight >}}
+```
 
 Example where the calc is invalid:
 
-{{< highlight scss >}}
+```scss
 $border-radius: .25rem;
 $border-width: 0;
 
@@ -249,4 +249,4 @@ $border-width: 0;
   // Output .25rem
   border-radius: subtract($border-radius, $border-width);
 }
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.0/forms/overview.md
index 501be9287d..4311b4f623 100644
--- a/site/content/docs/5.0/forms/overview.md
+++ b/site/content/docs/5.0/forms/overview.md
@@ -93,9 +93,9 @@ Inline text can use any typical inline HTML element (be it a `<span>`, `<small>`
 
 Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.
 
-{{< highlight html >}}
+```html
 <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
-{{< /highlight >}}
+```
 
 Add the `disabled` attribute to a `<fieldset>` to disable all the controls within. Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
 
diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.0/getting-started/accessibility.md
index 524c882890..d6bfc21345 100644
--- a/site/content/docs/5.0/getting-started/accessibility.md
+++ b/site/content/docs/5.0/getting-started/accessibility.md
@@ -30,18 +30,18 @@ Some combinations of colors that currently make up Bootstrap's default paletteâ€
 
 Content which should be visually hidden, but remain accessible to assistive technologies such as screen readers, can be styled using the `.visually-hidden` class. This can be useful in situations where additional visual information or cues (such as meaning denoted through the use of color) need to also be conveyed to non-visual users.
 
-{{< highlight html >}}
+```html
 <p class="text-danger">
   <span class="visually-hidden">Danger: </span>
   This action is not reversible
 </p>
-{{< /highlight >}}
+```
 
 For visually hidden interactive controls, such as traditional "skip" links, use the `.visually-hidden-focusable` class. This will ensure that the control becomes visible once focused (for sighted keyboard users). **Watch out, compared to the equivalent `.sr-only` and `.sr-only-focusable` classes in past versions, Bootstrap 5's `.visually-hidden-focusable` is a standalone class, and must not be used in combination with the `.visually-hidden` class.**
 
-{{< highlight html >}}
+```html
 <a class="visually-hidden-focusable" href="#content">Skip to main content</a>
-{{< /highlight >}}
+```
 
 ### Reduced motion
 
diff --git a/site/content/docs/5.0/getting-started/contents.md b/site/content/docs/5.0/getting-started/contents.md
index f5e6ae021b..e3667d3afa 100644
--- a/site/content/docs/5.0/getting-started/contents.md
+++ b/site/content/docs/5.0/getting-started/contents.md
@@ -12,7 +12,7 @@ Once downloaded, unzip the compressed folder and you'll see something like this:
 
 <!-- NOTE: This info is intentionally duplicated in the README. Copy any changes made here over to the README too, but be sure to keep in mind to add the `dist` folder. -->
 
-{{< highlight text >}}
+```text
 bootstrap/
 ├── css/
 │   ├── bootstrap-grid.css
@@ -44,7 +44,7 @@ bootstrap/
     ├── bootstrap.js.map
     ├── bootstrap.min.js
     └── bootstrap.min.js.map
-{{< /highlight >}}
+```
 
 This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
 
@@ -139,7 +139,7 @@ Similarly, we have options for including some or all of our compiled JavaScript.
 
 The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
 
-{{< highlight text >}}
+```text
 bootstrap/
 ├── dist/
 │   ├── css/
@@ -151,6 +151,6 @@ bootstrap/
 │              └── examples/
 ├── js/
 └── scss/
-{{< /highlight >}}
+```
 
 The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
diff --git a/site/content/docs/5.0/getting-started/download.md b/site/content/docs/5.0/getting-started/download.md
index 3de4910e37..5917997df8 100644
--- a/site/content/docs/5.0/getting-started/download.md
+++ b/site/content/docs/5.0/getting-started/download.md
@@ -38,17 +38,17 @@ If you want to download and examine our [examples]({{< docsref "/examples" >}}),
 
 Skip the download with [jsDelivr](https://www.jsdelivr.com/) to deliver cached version of Bootstrap's compiled CSS and JS to your project.
 
-{{< highlight html >}}
+```html
 <link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
 <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
 
 If you're using our compiled JavaScript and prefer to include Popper.js separately, add Popper.js before our JS, via a CDN preferably.
 
-{{< highlight html >}}
+```html
 <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
 <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
 
 ## Package managers
 
@@ -58,9 +58,9 @@ Pull in Bootstrap's **source files** into nearly any project with some of the mo
 
 Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
 
-{{< highlight sh >}}
+```sh
 npm install bootstrap@next
-{{< /highlight >}}
+```
 
 `const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap's plugins onto a `bootstrap` object.
 The `bootstrap` module itself exports all of our plugins. You can manually load Bootstrap's plugins individually by loading the `/js/dist/*.js` files under the package's top-level directory.
@@ -74,23 +74,23 @@ Bootstrap's `package.json` contains some additional metadata under the following
 
 Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):
 
-{{< highlight sh >}}
+```sh
 yarn add bootstrap@next
-{{< /highlight >}}
+```
 
 ### RubyGems
 
 Install Bootstrap in your Ruby apps using [Bundler](https://bundler.io/) (**recommended**) and [RubyGems](https://rubygems.org/) by adding the following line to your [`Gemfile`](https://bundler.io/gemfile.html):
 
-{{< highlight ruby >}}
+```ruby
 gem 'bootstrap', '~> {{< param current_ruby_version >}}'
-{{< /highlight >}}
+```
 
 Alternatively, if you're not using Bundler, you can install the gem by running this command:
 
-{{< highlight sh >}}
+```sh
 gem install bootstrap -v {{< param current_ruby_version >}}
-{{< /highlight >}}
+```
 
 [See the gem's README](https://github.com/twbs/bootstrap-rubygem/blob/master/README.md) for further details.
 
@@ -98,18 +98,18 @@ gem install bootstrap -v {{< param current_ruby_version >}}
 
 You can also install and manage Bootstrap's Sass and JavaScript using [Composer](https://getcomposer.org/):
 
-{{< highlight sh >}}
+```sh
 composer require twbs/bootstrap:{{< param current_version >}}
-{{< /highlight >}}
+```
 
 ### NuGet
 
 If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/):
 
-{{< highlight powershell >}}
+```powershell
 Install-Package bootstrap
-{{< /highlight >}}
+```
 
-{{< highlight powershell >}}
+```powershell
 Install-Package bootstrap.sass
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/getting-started/introduction.md b/site/content/docs/5.0/getting-started/introduction.md
index cce1423be9..1a2c84b9ad 100644
--- a/site/content/docs/5.0/getting-started/introduction.md
+++ b/site/content/docs/5.0/getting-started/introduction.md
@@ -18,9 +18,9 @@ Looking to quickly add Bootstrap to your project? Use jsDelivr, a free open sour
 
 Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
 
-{{< highlight html >}}
+```html
 <link rel="stylesheet" href="{{< param "cdn.css" >}}" integrity="{{< param "cdn.css_hash" >}}" crossorigin="anonymous">
-{{< /highlight >}}
+```
 
 ### JS
 
@@ -30,18 +30,18 @@ Many of our components require the use of JavaScript to function. Specifically,
 
 Include everything you need in one script with our bundle. Our `bootstrap.bundle.js` and `bootstrap.bundle.min.js` include [Popper](https://popper.js.org/). For more information about what's included in Bootstrap, please see our [contents]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) section.
 
-{{< highlight html >}}
+```html
 <script src="{{< param "cdn.js_bundle" >}}" integrity="{{< param "cdn.js_bundle_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
 
 #### Separate
 
 If you decide to go with the separate scripts solution, Popper.js must come first, and then our JavaScript plugins.
 
-{{< highlight html >}}
+```html
 <script src="{{< param "cdn.popper" >}}" integrity="{{< param "cdn.popper_hash" >}}" crossorigin="anonymous"></script>
 <script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
-{{< /highlight >}}
+```
 
 #### Modules
 
@@ -57,7 +57,7 @@ Curious which components explicitly require our JavaScript and Popper.js? Click
 
 Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
 
-{{< highlight html >}}
+```html
 <!doctype html>
 <html lang="en">
   <head>
@@ -84,7 +84,7 @@ Be sure to have your pages set up with the latest design and development standar
     -->
   </body>
 </html>
-{{< /highlight >}}
+```
 
 That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
 
@@ -96,20 +96,20 @@ Bootstrap employs a handful of important global styles and settings that you'll
 
 Bootstrap requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
 
-{{< highlight html >}}
+```html
 <!doctype html>
 <html lang="en">
   ...
 </html>
-{{< /highlight >}}
+```
 
 ### Responsive meta tag
 
 Bootstrap is developed *mobile first*, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, **add the responsive viewport meta tag** to your `<head>`.
 
-{{< highlight html >}}
+```html
 <meta name="viewport" content="width=device-width, initial-scale=1">
-{{< /highlight >}}
+```
 
 You can see an example of this in action in the [starter template](#starter-template).
 
@@ -119,11 +119,11 @@ For more straightforward sizing in CSS, we switch the global `box-sizing` value
 
 On the rare occasion you need to override it, use something like the following:
 
-{{< highlight css >}}
+```css
 .selector-for-some-widget {
   box-sizing: content-box;
 }
-{{< /highlight >}}
+```
 
 With the above snippet, nested elements—including generated content via `::before` and `::after`—will all inherit the specified `box-sizing` for that `.selector-for-some-widget`.
 
diff --git a/site/content/docs/5.0/getting-started/javascript.md b/site/content/docs/5.0/getting-started/javascript.md
index 38b2266234..00fdc994a1 100644
--- a/site/content/docs/5.0/getting-started/javascript.md
+++ b/site/content/docs/5.0/getting-started/javascript.md
@@ -16,14 +16,14 @@ If you use a bundler (Webpack, Rollup...), you can use `/js/dist/*.js` files whi
 
 We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/#feat=es6-module).
 
-{{< highlight html >}}
+```html
 <script type="module">
   import { Toast } from 'bootstrap.esm.min.js'
 
   Array.from(document.querySelectorAll('.toast'))
     .forEach(toastNode => new Toast(toastNode))
 </script>
-{{< /highlight >}}
+```
 
 {{< callout warning >}}
 ## Incompatible plugins
@@ -58,7 +58,7 @@ Bootstrap provides custom events for most plugins' unique actions. Generally, th
 
 All infinitive events provide [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) functionality. This provides the ability to stop the execution of an action before it starts. Returning false from an event handler will also automatically call `preventDefault()`.
 
-{{< highlight js >}}
+```js
 var myModal = document.getElementById('myModal')
 
 myModal.addEventListener('show.bs.modal', function (e) {
@@ -66,30 +66,30 @@ myModal.addEventListener('show.bs.modal', function (e) {
     return e.preventDefault() // stops modal from being shown
   }
 })
-{{< /highlight >}}
+```
 
 {{< callout warning >}}
 ## jQuery events
 
 Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-no-jquery` attribute set on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
 
-{{< highlight js >}}
+```js
 $('#myTab a').on('shown.bs.tab', function () {
   // do something...
 })
-{{< /highlight >}}
+```
 {{< /callout >}}
 
 ## Programmatic API
 
 All constructors accept an optional options object or nothing (which initiates a plugin with its default behavior):
 
-{{< highlight js >}}
+```js
 var myModalEl = document.getElementById('myModal')
 
 var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
 var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard
-{{< /highlight >}}
+```
 
 If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`.
 
@@ -99,17 +99,17 @@ All programmatic API methods are **asynchronous** and return to the caller once
 
 In order to execute an action once the transition is complete, you can listen to the corresponding event.
 
-{{< highlight js >}}
+```js
 var myCollapseEl = document.getElementById('#myCollapse')
 
 myCollapseEl.addEventListener('shown.bs.collapse', function (e) {
   // Action to execute once the collapsible area is expanded
 })
-{{< /highlight >}}
+```
 
 In addition a method call on a **transitioning component will be ignored**.
 
-{{< highlight js >}}
+```js
 var myCarouselEl = document.getElementById('myCarousel')
 var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance
 
@@ -119,33 +119,33 @@ myCarouselEl.addEventListener('slid.bs.carousel', function (e) {
 
 carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
 carousel.to('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!
-{{< /highlight >}}
+```
 
 ### Default settings
 
 You can change the default settings for a plugin by modifying the plugin's `Constructor.Default` object:
 
-{{< highlight js >}}
+```js
 // changes default for the modal plugin's `keyboard` option to false
 bootstrap.Modal.Default.keyboard = false
-{{< /highlight >}}
+```
 
 ## No conflict (only if you use jQuery)
 
 Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
 
-{{< highlight js >}}
+```js
 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
 $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
-{{< /highlight >}}
+```
 
 ## Version numbers
 
 The version of each of Bootstrap's plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
 
-{{< highlight js >}}
+```js
 bootstrap.Tooltip.VERSION // => "{{< param current_version >}}"
-{{< /highlight >}}
+```
 
 ## No special fallbacks when JavaScript is disabled
 
@@ -163,7 +163,7 @@ Tooltips and Popovers use our built-in sanitizer to sanitize options which accep
 
 The default `allowList` value is the following:
 
-{{< highlight js >}}
+```js
 var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
 var DefaultAllowlist = {
   // Global attributes allowed on any supplied element below.
@@ -198,11 +198,11 @@ var DefaultAllowlist = {
   u: [],
   ul: []
 }
-{{< /highlight >}}
+```
 
 If you want to add new values to this default `allowList` you can do the following:
 
-{{< highlight js >}}
+```js
 var myDefaultAllowList = bootstrap.Tooltip.Default.allowList
 
 // To allow table elements
@@ -215,15 +215,15 @@ myDefaultAllowList.td = ['data-option']
 // Be careful about your regular expressions being too lax
 var myCustomRegex = /^data-my-app-[\w-]+/
 myDefaultAllowList['*'].push(myCustomRegex)
-{{< /highlight >}}
+```
 
 If you want to bypass our sanitizer because you prefer to use a dedicated library, for example [DOMPurify](https://www.npmjs.com/package/dompurify), you should do the following:
 
-{{< highlight js >}}
+```js
 var yourTooltipEl = document.getElementById('yourTooltip')
 var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
   sanitizeFn: function (content) {
     return DOMPurify.sanitize(content)
   }
 })
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/getting-started/webpack.md b/site/content/docs/5.0/getting-started/webpack.md
index 76852c159e..4b9c525dd9 100644
--- a/site/content/docs/5.0/getting-started/webpack.md
+++ b/site/content/docs/5.0/getting-started/webpack.md
@@ -14,17 +14,17 @@ toc: true
 
 Import [Bootstrap's JavaScript]({{< docsref "/getting-started/javascript" >}}) by adding this line to your app's entry point (usually `index.js` or `app.js`):
 
-{{< highlight js >}}
+```js
 // You can specify which plugins you need
 import { Tooltip, Toast, Popover } from 'bootstrap';
-{{< /highlight >}}
+```
 
 Alternatively, if you only need just a few of our plugins, you may **import plugins individually** as needed:
 
-{{< highlight js >}}
+```js
 import Alert from 'bootstrap/js/dist/alert';
 ...
-{{< /highlight >}}
+```
 
 Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property.
 This means that you will have to make sure to add it to your `package.json` using `npm install popper.js`.
@@ -37,14 +37,14 @@ To enjoy the full potential of Bootstrap and customize it to your needs, use the
 
 First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{< docsref "/customize/sass" >}}). Then, use your main Sass file to import your custom variables, followed by Bootstrap:
 
-{{< highlight scss >}}
+```scss
 @import "custom";
 @import "~bootstrap/scss/bootstrap";
-{{< /highlight >}}
+```
 
 For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar:
 
-{{< highlight js >}}
+```js
 // ...
 {
   test: /\.(scss)$/,
@@ -75,19 +75,19 @@ For Bootstrap to compile, make sure you install and use the required loaders: [s
   }]
 }
 // ...
-{{< /highlight >}}
+```
 
 ### Importing Compiled CSS
 
 Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point:
 
-{{< highlight js >}}
+```js
 import 'bootstrap/dist/css/bootstrap.min.css';
-{{< /highlight >}}
+```
 
 In this case you may use your existing rule for `css` without any special modifications to webpack config, except you don't need `sass-loader` just [style-loader](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader).
 
-{{< highlight js >}}
+```js
 // ...
 module: {
   rules: [
@@ -101,4 +101,4 @@ module: {
   ]
 }
 // ...
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/helpers/clearfix.md b/site/content/docs/5.0/helpers/clearfix.md
index 344a577fd7..89bafbe70e 100644
--- a/site/content/docs/5.0/helpers/clearfix.md
+++ b/site/content/docs/5.0/helpers/clearfix.md
@@ -10,9 +10,9 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also
 
 Use in HTML:
 
-{{< highlight html >}}
+```html
 <div class="clearfix">...</div>
-{{< /highlight >}}
+```
 
 The mixin source code:
 
@@ -20,11 +20,11 @@ The mixin source code:
 
 Use the mixin in SCSS:
 
-{{< highlight scss >}}
+```scss
 .element {
   @include clearfix;
 }
-{{< /highlight >}}
+```
 
 The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
 
diff --git a/site/content/docs/5.0/helpers/position.md b/site/content/docs/5.0/helpers/position.md
index ef7ab0dfc3..d54c1c7955 100644
--- a/site/content/docs/5.0/helpers/position.md
+++ b/site/content/docs/5.0/helpers/position.md
@@ -10,33 +10,33 @@ toc: true
 
 Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
 
-{{< highlight html >}}
+```html
 <div class="fixed-top">...</div>
-{{< /highlight >}}
+```
 
 ## Fixed bottom
 
 Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.
 
-{{< highlight html >}}
+```html
 <div class="fixed-bottom">...</div>
-{{< /highlight >}}
+```
 
 ## Sticky top
 
 Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers.
 
-{{< highlight html >}}
+```html
 <div class="sticky-top">...</div>
-{{< /highlight >}}
+```
 
 ## Responsive sticky top
 
 Responsive variations also exist for `.sticky-top` utility.
 
-{{< highlight html >}}
+```html
 <div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
 <div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
 <div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
 <div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md
index e46d28279e..bde4e254c6 100644
--- a/site/content/docs/5.0/helpers/ratio.md
+++ b/site/content/docs/5.0/helpers/ratio.md
@@ -59,13 +59,13 @@ For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ra
 
 This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.
 
-{{< highlight scss >}}
+```scss
 .ratio-4x3 {
   @include media-breakpoint-up(md) {
     --aspect-ratio: 50%; // 2x1
   }
 }
-{{< /highlight >}}
+```
 
 {{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}}
 <div class="ratio ratio-4x3">
diff --git a/site/content/docs/5.0/helpers/visually-hidden.md b/site/content/docs/5.0/helpers/visually-hidden.md
index 987d23b666..f80160edd6 100644
--- a/site/content/docs/5.0/helpers/visually-hidden.md
+++ b/site/content/docs/5.0/helpers/visually-hidden.md
@@ -13,7 +13,7 @@ Visually hide an element while still allowing it to be exposed to assistive tech
 <a class="visually-hidden-focusable" href="#content">Skip to main content</a>
 {{< /example >}}
 
-{{< highlight scss >}}
+```scss
 // Usage as a mixin
 
 .visually-hidden-title {
@@ -23,4 +23,4 @@ Visually hide an element while still allowing it to be exposed to assistive tech
 .skip-navigation {
   @include visually-hidden-focusable;
 }
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md
index 9dad5c0cff..5c701e4037 100644
--- a/site/content/docs/5.0/layout/breakpoints.md
+++ b/site/content/docs/5.0/layout/breakpoints.md
@@ -77,7 +77,7 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer
 
 Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
 
-{{< highlight scss >}}
+```scss
 // Source mixins
 
 // No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@@ -98,11 +98,11 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
     display: block;
   }
 }
-{{< /highlight >}}
+```
 
 These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For example:
 
-{{< highlight scss >}}
+```scss
 // X-Small devices (portrait phones, less than 576px)
 // No media query for `xs` since this is the default in Bootstrap
 
@@ -120,13 +120,13 @@ These Sass mixins translate in our compiled CSS using the values declared in our
 
 // XX-Large devices (larger desktops, 1400px and up)
 @media (min-width: 1400px) { ... }
-{{< /highlight >}}
+```
 
 ### Max-width
 
 We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
 
-{{< highlight scss >}}
+```scss
 // No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
 @include media-breakpoint-down(sm) { ... }
 @include media-breakpoint-down(md) { ... }
@@ -140,11 +140,11 @@ We occasionally use media queries that go in the other direction (the given scre
     display: block;
   }
 }
-{{< /highlight >}}
+```
 
 These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example:
 
-{{< highlight scss >}}
+```scss
 // X-Small devices (portrait phones, less than 576px)
 @media (max-width: 575.98px) { ... }
 
@@ -162,7 +162,7 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 
 // XX-Large devices (larger desktops)
 // No media query since the xxl breakpoint has no upper bound on its width
-{{< /highlight >}}
+```
 
 {{< callout warning >}}
 {{< partial "callout-info-mediaqueries-breakpoints.md" >}}
@@ -172,33 +172,33 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 
 There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
 
-{{< highlight scss >}}
+```scss
 @include media-breakpoint-only(xs) { ... }
 @include media-breakpoint-only(sm) { ... }
 @include media-breakpoint-only(md) { ... }
 @include media-breakpoint-only(lg) { ... }
 @include media-breakpoint-only(xl) { ... }
 @include media-breakpoint-only(xxl) { ... }
-{{< /highlight >}}
+```
 
 For example the `@include media-breakpoint-only(md) { ... }` will result in :
 
-{{< highlight scss >}}
+```scss
 @media (min-width: 768px) and (max-width: 991.98px) { ... }
-{{< /highlight >}}
+```
 
 ### Between breakpoints
 
 Similarly, media queries may span multiple breakpoint widths:
 
-{{< highlight scss >}}
+```scss
 @include media-breakpoint-between(md, xl) { ... }
-{{< /highlight >}}
+```
 
 Which results in:
 
-{{< highlight scss >}}
+```scss
 // Example
 // Apply styles starting from medium devices and up to extra large devices
 @media (min-width: 768px) and (max-width: 1199.98px) { ... }
-{{< /highlight >}}
+```
diff --git a/site/content/docs/5.0/layout/containers.md b/site/content/docs/5.0/layout/containers.md
index 1562f51ae8..425d70e14b 100644
--- a/site/content/docs/5.0/layout/containers.md
+++ b/site/content/docs/5.0/layout/containers.md
@@ -121,33 +121,33 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
 
 Our default `.container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.
 
-{{< highlight html >}}
+```html
 <div class="container">
   <!-- Content here -->
 </div>
-{{< /highlight >}}
+```
 
 ## Responsive containers
 
 Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width`s for each of the higher breakpoints. For example, `.container-sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.
 
-{{< highlight html >}}
+```html
 <div class="container-sm">100% wide until small breakpoint</div>
 <div class="container-md">100% wide until medium breakpoint</div>
 <div class="container-lg">100% wide until large breakpoint</div>
 <div class="container-xl">100% wide until extra large breakpoint</div>
 <div class="container-xxl">100% wide until extra extra large breakpoint</div>
-{{< /highlight >}}
+```
 
 ## Fluid containers
 
 Use `.container-fluid` for a full width container, spanning the entire width of the viewport.
 
-{{< highlight html >}}
+```html
 <div class="container-fluid">
   ...
 </div>
-{{< /highlight >}}
+```
 
 ## Sass
 
@@ -157,7 +157,7 @@ As shown above, Bootstrap generates a series of predefined container classes to
 
 In addition to customizing the Sass, you can also create your own containers with our Sass mixin.
 
-{{< highlight scss >}}
+```scss
 // Source mixin
 @mixin make-container($padding-x: $container-padding-x) {
   width: 100%;
@@ -171,6 +171,6 @@ In addition to customizing the Sass, you can also create your own containers wit
 .custom-container {
   @include make-container();
 }
-{{< /highlight >}}
+```
 
 For more information and examples on how to modify our Sass maps and variables, please refer to [the Sass section of the Grid documentation]({{< docsref "/layout/grid#sass" >}}).
diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md
index fa25e52d5b..c96e3aa9e9 100644
--- a/site/content/docs/5.0/layout/grid.md
+++ b/site/content/docs/5.0/layout/grid.md
@@ -371,7 +371,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
 
 You can also use the accompanying Sass mixin, `row-cols()`:
 
-{{< highlight scss >}}
+```scss
 .element {
   // Three columns to start
   @include row-cols(3);
@@ -381,7 +381,7 @@ You can also use the accompanying Sass mixin, `row-cols()`:
     @include row-cols(5);
   }
 }
-{{< /highlight >}}
+```
 
 ## Nesting
 
@@ -415,10 +415,10 @@ When using Bootstrap's source Sass files, you have the option of using Sass vari
 
 Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
 
-{{< highlight scss >}}
+```scss
 $grid-columns:      12;
 $grid-gutter-width: 1.5rem;
-{{< /highlight >}}
+```
 
 {{< scss-docs name="grid-breakpoints" file="scss/_variables.scss" >}}
 
@@ -428,7 +428,7 @@ $grid-gutter-width: 1.5rem;
 
 Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
 
-{{< highlight scss >}}
+```scss
 // Creates a wrapper for a series of columns
 @include make-row();
 
@@ -438,13 +438,13 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 // Get fancy by offsetting, or changing the sort order
 @include make-col-offset($size, $columns: $grid-columns);
-{{< /highlight >}}
+```
 
 ### Example usage
 
 You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
 
-{{< highlight scss >}}
+```scss
 .example-container {
   @include make-container();
   // Make sure to define this width after the mixin to override
@@ -477,7 +477,7 @@ You can modify the variables to your own custom values, or just use the mixins w
     @include make-col(4);
   }
 }
-{{< /highlight >}}
+```
 
 {{< example >}}
 <div class="example-container">
@@ -496,16 +496,16 @@ Using our built-in grid Sass variables and maps, it's possible to completely cus
 
 The number of grid columns can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` sets the width for the column gutters.
 
-{{< highlight scss >}}
+```scss
 $grid-columns: 12 !default;
 $grid-gutter-width: 1.5rem !default;
-{{< /highlight >}}
+```
 
 ### Grid tiers
 
 Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this:
 
-{{< highlight scss >}}
+```scss
 $grid-breakpoints: (
   xs: 0,
   sm: 480px,
@@ -518,6 +518,6 @@ $container-max-widths: (
   md: 720px,
   lg: 960px
 );
-{{< /highlight >}}
+```
 
 When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in `px` (not `rem`, `em`, or `%`).
diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.0/utilities/flex.md
index c4806ac6a0..b1fba7433b 100644
--- a/site/content/docs/5.0/utilities/flex.md
+++ b/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`.
 
diff --git a/site/content/docs/5.0/utilities/overflow.md b/site/content/docs/5.0/utilities/overflow.md
index bec79e1fc8..9697257625 100644
--- a/site/content/docs/5.0/utilities/overflow.md
+++ b/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`.
diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.0/utilities/position.md
index 8928ecd817..90874ba9e4 100644
--- a/site/content/docs/5.0/utilities/position.md
+++ b/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
 
diff --git a/site/content/docs/5.0/utilities/sizing.md b/site/content/docs/5.0/utilities/sizing.md
index 6f3bb08433..3a12caa2dd 100644
--- a/site/content/docs/5.0/utilities/sizing.md
+++ b/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 >}}
+```
diff --git a/site/content/docs/5.0/utilities/spacing.md b/site/content/docs/5.0/utilities/spacing.md
index e7a2960877..b3e96d8032 100644
--- a/site/content/docs/5.0/utilities/spacing.md
+++ b/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 >}}
+```
diff --git a/site/content/docs/5.0/utilities/visibility.md b/site/content/docs/5.0/utilities/visibility.md
index 83bce16240..349685bd6b 100644
--- a/site/content/docs/5.0/utilities/visibility.md
+++ b/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 >}}
+```