Buy Us a Beer! Community Forum Micro-Consulting

GitHub Gists ❺

Add embedded GitHub Gist capabilities to your blog.

Webflow Update

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.

SA5 Docs

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

What is Gist?

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.

Features Sygnal Attributes Adds

  • The ability to link a Webflow button and copy the content of your gist to the clipboard, ready to paste as clean, formatted code.

Examples

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

Usage Notes

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;

<script src="https://gist.github.com/memetican/b27a2d7c9649c379034deed0daf2ce5c.js"></script>

  • 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.;

<script src="https://gist.github.com/memetican/b27a2d7c9649c379034deed0daf2ce5c.js?file=richtext-loaded-event.html"></script>

Themes

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.

Copy to Clipboard Feature

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.

Roadmap

  • Theming Gist embeds

  • midnight theme

  • darkmode theme

  • Copy-to-clipboard support for standalone HTML Embeds

Getting Started

100% NOCODE All aspects of this feature are attributes-based for your convenience.

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the Attributes you want

See above for details.

Last updated