CodePen

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

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

Useful links

Source control URL
Bug tracker
Discussion

Screenshots

Screenshot #0
Screenshot #1

Contributors

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

Awards

Early bird 3.3
Early bird 3.3
Early bird 3.4
Early bird 3.4
Early bird 3.5
Early bird 3.5
Privacy friendly
Privacy friendly
Early bird 3.6
Early bird 3.6
Early bird 3.7
Early bird 3.7
Early bird 3.8
Early bird 3.8
Early bird 3.9
Early bird 3.9
Early bird 3.10
Early bird 3.10
Early bird 3.11
Early bird 3.11
Early bird 4.0
Early bird 4.0
Early bird 4.1
Early bird 4.1
Early bird 4.2
Early bird 4.2
Early bird 4.3
Early bird 4.3

Comments RSS

Comments

  • MD shot of me from his iphone4
    Aparup Banerjee
    Wed, 12 Feb 2014, 1:29 PM
    This was good fun! Thanks for sharing this.
    Do consider renaming the repository to the convention: moodle-{component}_{pluginname}
  • David Mudrák
    David Mudrák
    Fri, 7 Apr 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.

  • Teo Priser
    Teo Priser
    Thu, 11 May 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?
  • Arnaud Trouvé
    Arnaud Trouvé
    Tue, 16 May 2017, 9:22 PM
    Hi Theo.
    Indeed if urltolink is enabled CodePen should go first. What's your problem with your url ?
  • Al Khashaa
    Al Khashaa
    Fri, 30 Apr 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.
  • Arnaud Trouvé
    Arnaud Trouvé
    Fri, 30 Apr 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
  • Al Khashaa
    Al Khashaa
    Wed, 5 May 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