Devesh B
Devesh's Blog

Devesh's Blog

Embed an Online compiler into your website!

Embed an Online compiler into your website!

Devesh B

Published on Aug 27, 2021

1 min read

Embedding an Online compiler which is editable is much easier than you think, in this blog, we'll use codepen to embed the online compiler just like the one shown below!


Step 1

Go to codepen and create a pen.

image.png


Step 2

Open the pen and paste all the code that you want to embed.

image.png


Step 3

Now click on the embed button on the bottom right corner.

image.png


Step 4

Now choose any default tab you want to display on embed, choose your theme. The "Use Click-to-Load" loads pen when the user clicks on the pen, it is used for optimization and better performance. Select the editable option to let the users edit the code.

image.png


Now use "iframe" or "HTML" to embed the code into your webpage and enjoy!

Hope you liked the blog, and if you did make sure you hit those reactions, also follow me here on Hashnode and also on Twitter @Deveshb15 where I post similar content every day!

 
Share this