How to Embed CodePen on Various Blogs
Learn How to Utilize CodePen
Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js, and enjoy working with modern tech stacks to build innovative solutions. I'm committed to writing clean and efficient code, following best practices, and staying updated with the latest industry trends.
Throughout my career, I've gained valuable experience in full-stack development, including frontend design, backend development, and database management. I love solving complex problems and implementing creative solutions that enhance user experiences. I believe in the power of collaboration and thrive in cross-functional teams where I can contribute my skills and learn from others.
Beyond coding, I am an avid learner and enjoy sharing my knowledge with the developer community. I regularly contribute to open-source projects, write technical blog posts, and engage in discussions on emerging technologies. I'm always seeking opportunities to expand my skill set and stay at the forefront of software engineering.
CodePens is a great way to interactively demonstrate 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 the code to paste into the 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 afterward. 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!
