docs: switch to fenced codeblocks (#31806)

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