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

May 27, 2023
The first image of the blog article.

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.

A screenshot of the GitHub Gist interface.

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.

An example GitHub Gist with some simple Python code.

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:

Once you have completed you Gist and clicked the ‘Create secret gist’ button you will see this 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.

The correct setting to export your Gist to Webflow. You can copy this to your clipboard by clicking the clipboard icon (i.e two squares).

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:

How to add a 'Rich Text' element (highlighted in red) to your Webflow page.

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:

When typing in the 'Rich Text' element editor you should see a plus icon.

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

The options of the 'Rich Text' element editor and the code option highlighted in red.

You should be presented with a popup:

The HTML Embed Code Editor where you should paste the Gist script from the 'Export your Gist' section.

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.

This site uses cookies from Google to deliver its services and analyse traffic. Your IP address and user-agent are shared with Google along with performance and security metrics to ensure quality of service, generate usage statistics, and to detect and address abuse. By clicking “Accept”, you agree to the storing of cookies on your device. Learn More