GitHub Gists ❺
Add embedded GitHub Gist capabilities to your blog.
Last updated
Add embedded GitHub Gist capabilities to your blog.
Last updated
As of 22-Mar-2024, Webflow now has support for formatted Code Blocks in Rich Text elements, including editor support. While it doesn't offer theming or the ability to specify the type of code you're formatting [yet], it's very handy for many uses.
SA5's Gists feature is still useful if;
You need a copy button
You want line numbering
You need specific theme control for styling
You need to be able to explicitly specify the type of code you're formatting
But otherwise, we encourage you to use Webflow's native Code Blocks feature whenever possible, the integration is marvelous.
Does your article content contain JavaScript, CSS, HTML, XML, JSON, configuration files, or source code-formatted data of any kind?
Now you can easily add these content blocks to your Webflow rich text elements, with full syntax highlighting and easily make changes later.
This feature makes use of the GitHub Gist service, which is widely used and 100% free.
With SA5's Rich Text lib, you can simply drop an HTML embed anywhere in your rich text content and paste in the Gist's embed.
The code will be line numbered, and syntax-highlighted like this-
That's it.
And there's more...
You do not need to "fixup" any HTML tags to prevent HTML errors
You get Gist's full syntax highlighting for your code
SA5 let's you embed the Gist unstyled, or to apply our themes
Update your Gists anytime, using Gist's easy interface
Name your Gist elements and assign a copy-to-clipboard button
Can also be used outside of the rich text element, with standalone HTML Embeds
GitHub's gist service allows you to easily share snippets of code or other information. These snippets, or "gists", can be made public or private, and they are git repositories, which means they can be forked, cloned, and versioned.
You can also embed gists into other websites, which makes them a handy tool for sharing code samples in blog posts or other web pages.
From a blogger's perspective, these provide an excellent way to quickly share and maintain code excerpts in your blog without complex formatting requirements.
The ability to link a Webflow button and copy the content of your gist to the clipboard, ready to paste as clean, formatted code.
For a standalone Gist in an HTML Embed, plus a copy button, see here for a demonstration. Scroll down to see the gists, and try the copy buttons.
For a Rich Text-embedded Gist using the midnight theme, check out;
https://www.sygnal.com/lessons/breakpoints
To embed a Gist;
Drop an HTML embed anywhere on your page, or inside of a Rich Text element.
On the Gist page, copy the embed code ( top right ), and paste that code into your HTML embed. The code is a simple line of script that looks like this;
If you have a multi-file Gist, the above code will show all of the files in the Gist, one after another. If you want to show only one file, you can append a querystring to the script, e.g.;
In addition to the default Gist appearance, SA5 currently supports two themes;
midnight, inspired by CodePen
darkmode
To assign a theme, add the following attribute to the rich text block. That theme will be applied to all embedded Gists.
wfu-gist-theme=(theme)
This feature can also be used with a standalone HTML Embed element that is not part of a Rich Text Block ( RTB ).
For static Rich Text Blocks that are not CMS-bound, you can assign custom attributes and classes directly to sub-elements. In this case if you want to use different themes for different Gist embeds in the same RTB, you can assign the attribute directly to the HTML embed instead.
SA5 supports linking a button to your Gist to copy it.
When clicked, it will locate the identified HTML Embed, and extract, clean and format the code contents, and copy them to the clipboard.
I want this Button to copy the contents of this Gist to the clipboard
Tag your HTML Embed element with the custom attribute
wfu-gist=(identifier) using any unique identifier you want.
Tag your button with the custom attribute
wfu-gist-copy=(identifier)
Currently this only works with explicitly named embeds, which means that it's not easily adaptable to CMS-sourced rich text content. We're adding a separate feature for that soon.
Theming Gist embeds
midnight theme
darkmode theme
Copy-to-clipboard support for standalone HTML Embeds
100% NOCODE All aspects of this feature are attributes-based for your convenience.
First, add the library as detailed in Quick Start.
See above for details.
