Display Code Snippets With Syntax Highlighting And A Copy Button

The Quick Way

There's a quick and easy way to style text as code. Style a text in your style guide and name it <li-powerful>codescript<li-powerful>. Then click on the text you want the code class to be applied to. Write the script below in the embed and test.

The Best Way

If you want to place a code script with syntax highlighting that also works with a CMS in Webflow, you have to use a couple of scripts.

Yes, this works in a CMS too

Just to make it easier on you, I’ve collected the scripts you need to get syntax highlighting similar to what I used

You’ll need to put these scripts in the before <li-powerful></body> tag of the page where you want the scripts. This could be a CMS template or just any page

Then when you're putting the script in the Rich Text embed, you have to make sure the script goes in between 2 lines of codes like so,

That's it. Publish and Test!

To style the code script with more templates, check out an excellent tutorial from NoCodeCollab

  1. Syntax styling- primejs.com
  2. Scripts used from CDN Library
Webflow custom code library

Webflow - Code to the Rescue

The Webflow Library for custom code snippets that unlocks powerful possibilities in Webflow. Includes hand-picked and tested custom code that you can use in Webflow Projects.

Open Library

Need further help?

Need further help in understanding the resources or how to implement them? Feel free to reach out

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Ali Saeed Graphic Designer Kuwait

About Ali Saeed

Ali Saeed is a Kuwait-based web designer and Webflow developer who has been working as a graphic designer for 4 years, building social brands, company profiles, and presentations. He recently jumped into web design and development. As a web designer, Ali focuses on clarity in design layout and messaging strategy. In his free time, he loves to help the web community, solve problems, and build resources for web designers who want to optimize their websites using Webflow.

Send an email if you'd like to collaborate :)
View his portfolio website