DEV Community

Cover image for's CodePen Liquid Tag is Getting an Upgrade!
Jane Ori
Jane Ori

Posted on • Updated on's CodePen Liquid Tag is Getting an Upgrade!

Skip my practice writing and jump to the features!

I only learned about last Tuesday after a coworker shared a draft article with the team. After work, I read the FAQ and the About Page. It checked every box I've wanted for a dev blogging platform:

  • [x] We own our posts
  • [x] respects our privacy[1]
  • [x] Social-centric: comments, feeds, reactions, community
  • [x] I can embed from my favorite code-sharing platform, CodePen
  • [x] It's Open Source and encouraging new contributors
  • [x] Tons of other features

[1] if you sign up with your github account, it only asks to read your email address. THANK YOU.

So the first thing I did was play around with the codepen liquid tag and tried adding CodePen's custom theme-id option. It's a feature for pro users to change the appearance of the embed so I can stay on brand with my purple-heavy twitter feed:

Gif capture of Jane's colorful twitter feed

A little extra, I know, but I have fun so don't hate 😛

...theme-id didn't work

First I asked around to see if I was missing something, I know it wasn't documented but it seemed like something that should work since the default-tab parameter works. Then I remembered the about page linked to the github org because, I thought, surely it would be easy to add? I searched for "codepen" to find the code and related issues. Here's what I found:

Great! There's interest near by, but not for the thing I wanted specifically... So if I take care of both of those requests and loop mine in too, there's maybe a better chance of getting approved quickly.

Just one small problem though... As far as I remember,

I've never even opened a ruby file before

...and this is all written in Ruby. Fortunately, I did recently meet someone who seems to love Ruby though, Adrian while discussing sugary JS syntax idea I had

Seemed like he would be willing to give me pointers if I ran into trouble (I'm sure he would have, didn't need to ask though!), so I wasn't worried about stumbling my way through this.

Setup might be some effort, my Thursday night looks open, wait until then.

Time to code

My process went like this

  1. Follow the links into the contributor's guide
    • Get everything installed and running
    • Spend 3 hours not understanding postgress errors
    • Just get all the tests running
    • Hack enough of the code and env to get just spec/liquid_tags tests running and ignore everything else
  2. Throw around some copy-pasted code in the test file until new tests were successfully failing
    • this is pretty easy to do even in completely foreign syntax; Either it works, or it doesn't and you try again.
  3. Modify the implementation code until the tests were passing
    • not too difficult because Ruby Regular Expressions seem to be a superset of the features I know well enough to hack together quickly, and every existing line of Ruby here is an example to learn from
  4. For the sake of completion, add the last CodePen pro embed feature (editable=true) that wasn't previously mentioned
  5. Find and update the on-site docs for the codepen liquid tag
    • it's in two places, just had to do it once and copy paste
  6. Almost 2am Friday, time to open a PR only for the parts I was supposed to change

Ran into a problem with CI, (I probably had windows line endings in my push (oops!)). The core contributors were helpful here though and put effort in to get it working!

Thank you for helping me, help you, help us all

And finally, just a couple hours ago, we got confirmation of intent-to-merge for Tomorrow at 2pm Central, just one full week after I learned about 🎉

Comment for #16102

jeremyf avatar
jeremyf commented on

@janeori looks great, I want to give @msarit a chance to review as well. She's been spending a lot of time in the liquid tags.

I've added this to my watch list to merge on Tuesday UTC 20:00.

Now for the main course

All the codepen embed options

Basic embed

{% codepen %}

Private embed (CodePen PRO feature)

{% %}

Preview embed (NEW!)

Replace /pen/ with /pen/preview/ or with /embed/preview/, which becomes /embed/preview/ in the generated iframe either way
{% codepen %}
This is CodePen's "Click-to-Load" feature that shows a static preview without loading or running the heavier resources in larger pens. The user clicks once and the pen loads:

default-tab parameter

Show just the result tab:
{% codepen default-tab=result %}

Show the html and css tabs:
{% codepen default-tab=html,css %}

Show the js and result tab:
{% codepen default-tab=js,result %}

height parameter (NEW!)

Set the height on the iframe and pass in the parameter to codepen
{% codepen height=300 %}
default value is 600

(Many of the liquid tag embeds could use this height parameter upgrade! Consider becoming a contributor by copying (and/or improving) the code for your favorite one!)

editable=true (NEW!) (CodePen PRO feature)

Allows the code to be edited from the embed
{% codepen editable=true %}

theme-id (NEW!) (CodePen PRO feature)

Read about this feature on CodePen
{% codepen theme-id=40148 %}

Using multiple options together

{% codepen default-tab=css,result theme-id=40148 height=700 %}

The end!

Thank you for reading, hope you find the upgrades useful!

💜 // Jane

Top comments (4)

bramus profile image

Thanks for adding this, Jane!

rachsmith profile image
Rach Smith

amazing work. I am obsessed with your theme.

janeori profile image
Jane Ori

Thank you! Due credit: I only spent a few hours porting it to codemirror (the syntax highlighter codepen uses) from this VSCode plugin that's a combination of different people's work:
lots of chefs in this kitchen, I love it too though!

itlackey profile image
IT Lackey

Great job! I love the cyberpunk theme. I need that for vs code!!