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


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 one more line of code to configure highlight.js to use the <br> tag:


 document.querySelectorAll('div h6').forEach((block) => {



 hljs.configure({useBR: true});



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.


 .w-richtext h6 {

   font-size: 14px;

   font-weight: 400;

   font-family: Inconsolata, monospace;


 .hljs {

   padding: 20px;





browser mockup
Heart icon

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Symbol in RichText


Insert a symbol element into a RichText. On a static or dynamic page.

Read more
Blue arrow iconWhite Arrow icon

Pass Parameters


Pass input fields parameters and add them to the destination URL.

Read more
Blue arrow iconWhite Arrow icon

Hover to reveal Mask


A fixed background image that is revealed by mouse hover all over the section

Read more
Blue arrow iconWhite Arrow icon