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:

Destin's Youtube channel Smarter Every Day is one of my favourite places on the web.

Might also interest you:

Tabs with scrollable (sideways) Menu

Cloneable
Code
Design

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more

Contact form as a Chat widget

Cloneable
Code
Tricks

A contact form disguised as a chat widget.

Read more

ToDo List

Cloneable
Code

A todo list, created with JavaScript collected through the internet... ;)

Read more