However, at the end of 2019 Webflow announced support for code blocks within rich text elements. With this new feature it's now easy to bring in third party js libraries to customize the look of specific sections inside blog posts. This is where highlight.js steps in!
Adding this library is simple.
First add the required libraries to the head of the site:
For a list of all the theme files available via CDN: https://cdnjs.com/libraries/highlight.js
The theme I use for my site is darcula: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/darcula.min.css
Go to the body section of your blog post. Place the cursor where you'd like to insert the formatted code block. You'll find a circle with a plus sign appear:
Click this symbol and you'll get a menu for adding rich elements:
Select the code block symbol " < > " and enter the code you'd like to be formatted along with the special opening and closing brackets highlight.js calls for:
highlight.js will render the code on your site like this:
To render HTML, you'll have to first escape the HTML code. There's an excellent Stack Overflow post on this: here.
Once you've escaped the html, you'll then be able to insert it in the code block:
And that's it!
Let me know if you found this useful or if something didn't work in the comments below!