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

<style>

 .w-richtext h6 {

   font-size: 14px;

   font-weight: 400;

   font-family: Inconsolata, monospace;

 }

 .hljs {

   padding: 20px;

 }

</style>

Copy

Preview:

Share:

#StayTheFuckHome. Wash Hands. Wear gloves & mask if you have to leave home.

Might also interest you:

Pass Parameters

Cloneable
Code

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

Read more
White Arrow icon

Hover to reveal Mask

Cloneable
Code
Design

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

Read more
White Arrow icon

Auto Change Tabs 2.0

Cloneable
Code
Interactions

A new and improved version for a Tabs element that automatically change tabs

Read more
White Arrow icon