First we need to add the highlight.js plugin and all it's dependencies to our page/site.
That includes:
// In the <head> tag
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/default.min.css">
// In the <head> tag
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/atom-one-dark-reasonable.min.css">
// In the <body> tag
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
Next we will add the code to call the plugin and target the <H6> tag.
(from now on, we can not use the <H6> tag in our project unless we want it wrapped as a code syntax)
We add a bit more code to configure highlight.js to use the <br> tag:
(place this right after the `<script src="...` that we added earlier in the <body> tag)
<script>
document.querySelectorAll('div h6').forEach((block) => {
hljs.highlightBlock(block);
});
hljs.configure({useBR: true});
</script>
Last, we add some styles to the new <H6> tag when it is inside a Webflow rich-text element.
And some padding to the hole highlight box.
(this can go in the <head> tag or in an embed widget on the canvas)
<style>
.w-richtext h6 {
font-size: 14px;
font-weight: 400;
font-family: Inconsolata, monospace;
}
.hljs {
padding: 20px;
}
</style>
When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.