Code Highlighter

Highlight Codes between Content for your Users

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>

Explore more Elements