Oct 24, 2019
Back to all Elements
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>
Whenever possible, use Class Names to target the elements in your interaction. You never know when you'll need to duplicate and use it somewhere else...
.png)
.png)