docs: switch to fenced codeblocks (#31806)

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 >}}
+```