HTML Block
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Shortcodes</a></li>
<li class="breadcrumb-item active" aria-current="page">Code Highlighter</li>
</ol>
CSS Block
.breadcrumb {
position: relative;
margin: 1.5rem 0 0;
justify-content: center;
font-size: 90%;
}
JS Block
var popovers = [].slice.call(core.getVars.baseEl.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popovers.map( function(popoverEl) {
return new bootstrap.Popover(popoverEl, { container: 'body' });
});
Code Highlighter with Copy Button
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Shortcodes</a></li>
<li class="breadcrumb-item active" aria-current="page">Code Highlighter</li>
</ol>