Can I embed Github Gists into CMS rich text wth Embed.ly?

Design help CMS
1

Hi all! I’m new to Webflow and so far I love it, but in order to be able to finally move my site from my self-hosted Wordpress I need to be able to accomplish one final task that I’m totally stuck on.

I’ve read a bit on the forums that Webflow supports Embed.ly. I’m not sure if anything that Embed.ly can embed is possible, but they definitely support github. As my blog is a software tutorial site, it’s pretty essential that I be able to get syntax-highlighted code snippets into my posts.

In this thread jmw seemed to indicate that CodePens could be embedded, but I can’t figure out how to do that either (specifically in a rich text control for a CMS item).

It seems like I’m just missing something basic!

Thanks for all the excellent work. Webflow has been a pleasure, I can’t wait to never use wordpress again haha

Here is my public share link: LINK
(how to access public share link)

1 Like
2
  1. Copy the pen’s URL
  2. In a rich text field, start a new line and click the +, then the icon with the music note and map pin (“rich media”)
    15
  3. Paste URL

Voila.

Enjoy saying goodbye to WordPress!

1 Like
3

I got super excited until I realized Code Pen isn’t a general purpose code snipped formatter, but specific to HTML/CSS/JS. The overwhelming majority of my code examples are in python :confused:

Is there any possibility to getting a Gist to show up? If it’s feasible, I’m happy to add an item to the wish list.

Cheers!
Dave

4

Hey @davenovelli sent you a message in your other question but I blog about a way to do this on webflow

@domsch you might find this useful as well.

Let me know if it works for you.

5 Likes
5

Hi guys,

bumping this one up, did you guys find a way to embed Gists into Webflow CMS rich text element ? I followed @oyemike link to the blog but am still unsuccessful embeding any gist through the rich text.
Would you guys maybe have a read-only link ? :slight_smile: Thank you !

Screenshot%20(1259)
Screenshot%20(1259)1920×1080 332 KB
Screenshot%20(1260)
Screenshot%20(1260)1920×1080 446 KB
Screenshot%20(1261)
Screenshot%20(1261)1920×1080 388 KB

6

Sorry for the delay! Are you only viewing the preview or did you publish it? It doesn’t work in preview mode, but it will work on the published site if everything is correct (and yours appears to be good!)

1 Like
7

Hi @davenovelli !

Thank you for getting back at me ! I found a solution :slight_smile: Instead of copying the code in the page custom code, I copied the code in the main site custom code setting… it now works like a charm !
I found some interesting ressources regarding Gists customization here and also here for custom themes.

I even made some more research and was able to customize the look and feel of my gist ! Below is the css code I used (in the page setting this time) and here is the page I’m working on :slight_smile: I inspired myself from a tutorial @sabanna wrote back then regarding the filtering of dynamic elements with the MixItUp plugin and another codepen written by Ed Prats also using MixItUp to search for items’titles ! Pretty powerfull stuff !

The reason I wanted to share code is because I would like to make a little tutorial for Webflow too when my project is finished :slight_smile: And I wanted to make it look cool !

<style type="text/css"> 
@import url('https://fonts.googleapis.com/css?family=Droid+Sans+Mono');

body .gist .gist-file {
    background-color: #1d1f21;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    max-height: 720px;
}
body .gist .gist-data {
    max-height: 720px;
}
body .gist .blob-wrapper {
    background-color: #1d1f21;
    border-radius: 0;
}
body .gist .highlight {
    background-color: #1d1f21;
    font-family: 'Droid Sans Mono', monospace;
    font-size: 14px;   
}
body .gist .highlight td {
    padding: 5px 15px !important;
    line-height: 1;
    font-family: inherit;
    font-size: inherit;
}
body .gist .gist-meta {
    display: none;
}
body .gist .blob-num {
    color: #343537;
    background-color: none;
    pointer-events: none;
}
/* Begening of black theme */
body .gist .blob-code-inner {
    color: #c5c8c6;
}
body .gist .pl-enti {
    color: #f0c674;
    font-weight: 700;
}
body .gist .pl-s3 {
    color: #81a2be;
}
body .gist .pl-sf {
    color: #dad085;
}
body .gist .pl-mdr {
    color: #de935f;
    font-weight: 400;
}
body .gist .pl-ms1 {
    background: #c5c8c6;
}
body .gist .pl-c,
body .gist .pl-c span,
body .gist .pl-pdc {
    color: #969896;
    font-style: italic;
}
body .gist .pl-c1,
body .gist .pl-cce,
body .gist .pl-cn,
body .gist .pl-coc,
body .gist .pl-enc,
body .gist .pl-ens,
body .gist .pl-kos,
body .gist .pl-kou,
body .gist .pl-mh .pl-pdh,
body .gist .pl-mq,
body .gist .pl-pdc1,
body .gist .pl-pde,
body .gist .pl-pse,
body .gist .pl-pse .pl-s2,
body .gist .pl-scp,
body .gist .pl-stp,
body .gist .pl-sv,
body .gist .pl-v,
body .gist .pl-vi,
body .gist .pl-vpf,
body .gist .pl-mri,
body .gist .pl-va,
body .gist .pl-vpu {
    color: #de935f;
}
body .gist .pl-cos,
body .gist .pl-ml,
body .gist .pl-pds,
body .gist .pl-s1,
body .gist .pl-sol {
    color: #b5bd68;
}
body .gist .pl-e,
body .gist .pl-ef,
body .gist .pl-en,
body .gist .pl-enf,
body .gist .pl-enm,
body .gist .pl-entc,
body .gist .pl-eoi,
body .gist .pl-smc {
    color: #f0c674;
}
body .gist .pl-ent,
body .gist .pl-eoa,
body .gist .pl-eoai,
body .gist .pl-eoai .pl-pde,
body .gist .pl-k,
body .gist .pl-ko,
body .gist .pl-kolp,
body .gist .pl-mc,
body .gist .pl-mr,
body .gist .pl-ms,
body .gist .pl-s,
body .gist .pl-mp .pl-s3,
body .gist .pl-sok,
body .gist .pl-sra,
body .gist .pl-src,
body .gist .pl-sre,
body .gist .pl-st {
    color: #b294bb;
}
body .gist .pl-entm,
body .gist .pl-eoac,
body .gist .pl-eoac .pl-pde,
body .gist .pl-mai .pl-sf,
body .gist .pl-mm,
body .gist .pl-pdv,
body .gist .pl-som,
body .gist .pl-sr,
body .gist .pl-vo {
    color: #c66;
}
body .gist .pl-mb,
body .gist .pl-pdb {
    color: #b5bd68;
    font-weight: 700;
}
body .gist .pl-mi,
body .gist .pl-pdi {
    color: #b294bb;
    font-style: italic;
}
body .gist .pl-mp,
body .gist .pl-mp1 .pl-sf {
    color: #81a2be;
}
body .gist .pl-s2,
body .gist .pl-sc,
body .gist .pl-smi,
body .gist .pl-smp,
body .gist .pl-stj,
body .gist .pl-mo,
body .gist .pl-entl {
    color: #c5c8c6;
}
body .gist .pl-mi1,
body .gist .pl-mdht {
    color: #8f9d6a;
    background: rgba(0, 64, 0, .5);
}
body .gist .pl-md,
body .gist .pl-mdhf {
    color: #c66;
    background: rgba(64, 0, 0, .5);
}
body .gist .pl-mdh,
body .gist .pl-mdi {
    color: #c66;
    font-weight: 400;
}
body .gist .pl-ib,
body .gist .pl-iu {
    background: #c66;
}
body .gist .pl-id,
body .gist .pl-ii {
    background: #c66;
    color: #fff;
}
</style>

Screenshot%20(1281)
Screenshot%20(1281)1920×1080 192 KB

2 Likes
8

Whoa! Custom css for the code is awesome. Well done

1 Like
9

Hi here! You can now add code to your rich text in the CMS! Super creative, but no workaround needed anymore!

You can find it as a button in the rich text block menu.

Here’s the announcement: You can now use custom code in rich text elements | Webflow Features

1 Like