Step-by-Step: Add Code Examples to Webflow Blog (No plugins)

This tutorial demonstrates how to embed code examples into a Webflow blog without using plugins. Code examples are widgets that are embedded within the text of your blog to show the reader beautiful snippets of code.

We will take you step-by-step through the quick process and when you are done it should look something like this:

To complete this guide you will need a GitHub account and a Webflow site. At the time of writing Gist is free.

Feel free to jump to any step of the guide;

1. Create an example in GitHub Gist;
2. Export your Gist;
3. Setup your Webflow CMS;
4. Embed your Gist in Webflow;
5. Publish blog.

Create an example in GitHub Gist

Navigate to GitHub Gist (by going to https://gist.github.com) and login to your GitHub account. You should see the following interface: this is where you add your example code.

In the Gist editor (i.e textbox with numbers), you can add your example code. We will write a simple Python program to print “HelloWorld” and call it “hello_world.py”. You should add a filename and the filetype so that the code is formatted with the correct programming language.

‍

Export your Gist

Once, you are happy with your code example just click the ‘Create secret gist’ button. We use secret gists as we do not want the examples to show up in search engines, but we still want it accessible to anyone visiting our blog. You will see a new page:

There will be a dropdown button with the option ‘Embed’ that allows you to copy a HTML script tag (i.e <script src = “URL”></script> with some specific URL related to your Gist). Copy this HTML to your clipboard and go to your Webflow site.

‍

Setup your Webflow CMS

There are a couple of different ways to add your Gist to your site, but the general idea is you need to create an element on your page that will allow you to embed your HTML.

Ideally, your blog will be using a Webflow CMS to publish new content without having to redesign the webpage each time. I would recommend that you add your Gist in a ‘Rich Text’ element within your CMS template. This will make it easy to add a Gist alongside the blog text. The picture below shows you how to add the 'Rich Text' element:

Embed your Gist in Webflow

Once you have a 'Rich Text' element on your Webflow page, adding the Gist is easy. Make sure that you have copied the Gist script (see 'Export your Gist'). Now, within the 'Rich Text' editor select the plus icon:

Click this icon and you should be presented with several options. Click the code option (i.e highlighted in red below):

You should be presented with a popup:

Simply paste your script from GitHub Gist in this box, and hit 'Save & Close'.

‍

Publish blog

Once your blog post is ready, you can 'Stage for publish' your changes in the Webflow CMS and then publish the site. Your code example should be present in your blog!

‍

I hope you found this simple step-by-step tutorial for embedding code examples in your Webflow blog clear and useful.