CodePens are a great way to interactively demonstrate a code concepts in a blog post. Here are the current methods to achieve this on platforms like Dev.to, Hashnode, Medium, and website platforms like Wordpress.
Dev.to
Two ways to share specific CodePen on Dev.to:
- Post URL
Paste the Liquid tag directly into the page. Do not surround it with any other Markdown code formatting tags like the triple or single backticks.
Click "Share" on the bottom right of your CodePen pen.
"Share on DEV" button give you a liquid link
Hashnode
-Click Embed at the bottom right of your pen
-Go to iFrame & copy code to paste into Hashnode blog
Medium
Press enter for a new line. The plus icon in a circle will appear to the left of the line. Click this and choose the embed option icon, which is the angle brackets like this: <>. Paste the url for your CodePen, then press enter afterwards. Pressing enter is important even if you immediately delete the line, otherwise the CodePen won’t load into the page.
WordPress
To embed a Pen from CodePen, you will need to create or edit a Post or Page on your site.
Next, copy the URL of your Pen and paste it on a line by itself in your Visual editor. Make sure that it is not hyperlinked.
That’s it! The update will preview live in the Visual Editor so you can see what it looks like without having to click Preview Changes.
Summary
I hope this blog saves you time moving forward with utilizing CodePen to make your blogs more attractive.
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
If you enjoyed this article & would like to leave a tip — click here
Top comments (0)