Add code blocks and snippets to Webflow blog posts
How to easily add code blocks to Webflow CMS items. A must have for anyone publishing content or documentation for a technical audience.
If you use Webflow CMS and publish content or documentation for a technical audience—you probably need the ability to add code blocks and snippets to posts.
Unfortunately, Webflow's rich text editor doesn't make this easy.
One solution is to embed Github Gists/Codepens or use custom code and scripts. However, we've been building Webflow sites for years and don't recommend it. Here's why:
- Creating a gist/pen for every block is a hassle. We absolutely love Github Gists and Codepen, but if you're publishing frequently, this workflow quickly becomes a mess.
The best way to add code blocks to CMS items (*updated 2023)
This is where Audienceful steps in. After being annoyed with this ourselves, we built a new, better way to publish posts to Webflow CMS.
We use the Webflow API to publish directly to your site, without ever needing to login to Webflow.
Our Notion-inspired editor has native support for code snippets, code blocks, and many other things you won't find in the Webflow rich text editor.
Best of all, publishing to Webflow sites is 100% free, even if you don't run your email marketing or newsletter on Audienceful.
1. Create a free account with Audienceful
Create a free Audienceful account here. It's fast and only takes about 30 seconds.
2. Connect your Webflow connections
Once you're inside Audienceful, go to Settings > Webflow Collections and click the Connect New button.
Here you'll need to give Audienceful permission to publish to your Webflow sites and need to align fields so your post data goes to the right place.
If you're having issues, here's our full guide for connecting Webflow collections.
That's it. Start publishing!
You can now publish content much faster from a tool that feels like your favorite notes app--with native support for code blocks and snippets.
We actually use Audienceful ourselves to publish all of the content on this website—including the very post you're reading right now.