CodePen

Filters ::: filter_codepen
Maintained by Arnaud Trouvé
A filter to embed Pens from their URL on codepen.io
Latest release:
35 sites
66 downloads
7 fans
Current versions available: 4

This is a text filter to embed a CodePen from codepen.io into a text area in Moodle. Simply enable the plugin and paste the direct URL to a Pen in your content (or heading if enabled). A standard URL looks like this:

https://codepen.io/[username]/pen/[Pen ID]

For example:

https://codepen.io/thedannywahl/pen/Gbdaj

Notes

  • CodePen does not have an API so we cannot manipulate the appearance of embeds on a per-Pen basis, so settings here are global.
  • If a user does not have javascript enabled a text fallback is provided with a link to the Pen.
  • Links to Pens are escaped if you do not want to embed. E.g.:
    <a href="https://codepen.io/thedannywahl/pen/Gbdaj">https://codepen.io/thedannywahl/pen/Gbdaj</a>
  • Make sure that if you have the "urltolink" filter enabled that the CodePen filter is listed first because links are escaped.
  • Do not use www. or cdpn.io short-link, these are not valid pen URLs. Visiting them in a browser always redirects to the full Pen URL path (as exampled above).
  • This filter only works with the /pen/ URL. It will not embed from other views like /full/ /live/ etc...

Screenshots

Screenshot #0
Screenshot #1

Contributors

Arnaud Trouvé (Lead maintainer)
Danny Wahl: Original author and previous maintainer
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • MD shot of me from his iphone4
    Wed, Feb 12, 2014, 1:29 PM
    This was good fun! Thanks for sharing this.
    Do consider renaming the repository to the convention: moodle-{component}_{pluginname}
  • Fri, Apr 7, 2017, 4:21 AM

    I am happy to announce that Arnaud Trouvé has adopted this plugin. Thanks Danny for your work on it and for offering it for adoption responsibly.

  • Thu, May 11, 2017, 5:56 PM
    Then, if the "urltolink" filter is enabled, the CodePen should go first, right? I'm trying to re-enable my link write-my-term-paper into the one with www. Is that ok that I use the filter now? Should I wait?
  • Tue, May 16, 2017, 9:22 PM
    Hi Theo.
    Indeed if urltolink is enabled CodePen should go first. What's your problem with your url ?
  • Fri, Apr 30, 2021, 3:47 PM
    Hi, I feel very lucky to find this plugin. But after I installed it, why is the pen URL that I pasted still in the form of a link? while when I pasted the example URL from you, this plugin worked perfectly.
  • Fri, Apr 30, 2021, 5:38 PM
    Hi Al.
    If the example pen works it means you correctly configure your moodle and plugin.
    Does your pen link respect following pattern : https://codepen.io/[username]/pen/[Pen ID] ?
    If yes could you create an issue in the tracker specifying moodle version, plugin version and pen link
  • Wed, May 5, 2021, 9:17 PM
    I'm sure my link is using the correct pattern, and I've added my problem to the bug tracker.
Please login to post comments