White Arrow icon
Back to all Elements

Code Syntax in a Dynamic rich-text Element

Using highlight.js plugin to add code syntax in a Dynamic rich-text element

First we need to add the highlight.js plugin and all it's dependencies to our page/site.
That includes:

  • The default CSS stylesheet (default.min.css)
  • A custom stylesheet from a CDN (atom-one-dark-reasonable.min.css)
  • The plug in JS file (highlight.min.js)

// 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>‍

Copy

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>

Copy

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>

Copy

Preview:

browser mockup
Share:
Heart icon

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

Dynamic Height

Code
Tricks
JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.

Read more
Blue arrow iconWhite Arrow icon

Maintain Form Height on Success

Code
jQuery

Using a little bit of jQuery to adjust the success message height

Read more
Blue arrow iconWhite Arrow icon

CMS Autocomplete

Cloneable
CMS
JavaScript

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

Read more
Blue arrow iconWhite Arrow icon