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