- CodePen is a collaborative development platform. Its core functionality is that it allows you to write code in the browser and view the results as you go.
- A powerful and liberating online code editor for developers of all skill levels, but especially for those learning to code. Codepen primarily concentrates on front-end languages such as HTML, CSS, and JavaScript, as well as the preprocessing syntaxes that transform them.
- Notion which is an all-in one productivity tool comes with a lot of awesome features.One of feature is the support to embed code from various third party service providers.
In this Tutorial we will see How to embed Codepen into Notion.
Step-by-Step Guide : How to embed Codepen into Notion
Step 1 : Login to your codepen account https://codepen.io/
Once you logon you will see codepen dashboard in your browser.
Step 2 : Open the pen which you want to embed into Notion.
Step 3 : Copy the URL of your codepen code
Step 4 : Go to Notion and open the Notion Page where your want to embed the code.
Type “/Codepen” or “/Code” without quotes to get the CodePen Embed option.
Select the CodePen Option under EMBEDS from drop-down.
Step 5: Paste the Codepen URL as shown below and click on Embed Link.
Step 6 : Once you will click on the Embed Link ,you will see the pen on your Notion Page
You can click on HTML,CSS and JS to see the code.
Other Useful Articles :
