Moodle Plugins directory: CodePen | Moodle.org

CodePen
Filters ::: filter_codepen
Maintained by
Arnaud Trouvé
A filter to embed Pens from their URL on codepen.io
Latest release:
68 sites
434 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...
Useful links
Contributors
Arnaud Trouvé (Lead maintainer)
Danny Wahl: Original author and previous maintainer
Please login to view contributors details and/or to contact them
Do consider renaming the repository to the convention: moodle-{component}_{pluginname}
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.
Indeed if urltolink is enabled CodePen should go first. What's your problem with your url ?
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