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:

When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.

Might also interest you:

ToDo List

Cloneable
Code

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

Read more

Simple Mega Nav (Similar to Mailchimp's)

Design
Interactions
Code

A very simple mega navigation bar, opens on hover and changes background color on scroll.

Read more

Auto change tabs

Code
Design
Tricks

A script to automatically switch between tabs in a loop.

Read more