Oct 24, 2019
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:

Share:

Try avoiding using "Transition: All". It is heavy on the browser's engine.

Might also interest you:

3d Video Slider (swiper.js)

Cloneable
CMS
JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Read more
White Arrow icon

Webflow Dashboard Workspaces Hack

Webflow UI Hack
Code
CSS

Convert the Workspaces dropdown to an open sidebar with custom order.

Read more
White Arrow icon

Glossary

Cloneable
JavaScript
CMS

A clonable for creating an Alphabetical glossary

Read more
White Arrow icon