Table of contents
Embedding a console in your blog or website can be a great way to share code snippets, demonstrate programming techniques, or showcase your work to the world. Here are five ways that you can embed a console in your blog or website:
CodePen:
CodePen is a popular online code editor that allows you to write HTML, CSS, and JavaScript code and see the results in real-time. They offer an embedded console feature that you can use to create and run code snippets, and you can embed the console in your blog.
The best feature of this platform is you don't need to sign up before coding. You can create your code and check how it's working. When you are ready to save, then you can sign up or log in. They treat coding as a primary task rather than login, thus my favourite tool for HTML coding.
You can create a new pen in the following ways:
a. Open your browser and type "pen.new" in the address bar.
b. Visit the CodePen website and click on the "Pen" button on the sidebar.
After writing your code, click on the "Embed" button in the bottom right corner of the screen.
You can set default tabs, and themes, make it load on click, or make it editable for the user. Copy the Iframe code that is provided, and paste it into your blog or website where you want the console to appear. You can also check other code embed options besides Iframe as shown in the image below.
Codepen is a great platform to get your desired code embed. Below I have embedded my code as Iframe.
JSFiddle:
JSFiddle is another online code editor that allows you to write HTML, CSS, and JavaScript code and see the results in real-time. They offer an embedded console feature that you can use to create and run code snippets, and you can embed the console in your blog.
To do this, Open your browser and type "jsfiddle.net" in the address bar.
Sign up for the platform and start coding. After that when you hit save. You see the embed option at the top. The Embed option won't be available if you don't sign up/log in.
Then click on the "<> Embed". You can set which tabs to choose, set light or dark visuals, and other options. They give Embed snippets in script or iframe.
Click on "Prefer iframe?" to see the iframe snippet.
JSFiddle is a great platform but the iframes are not so responsive, I had to edit the code a little to make it look good on the mobile app. I liked the feature of which tabs I want to show in my snippet. Below is my code snippet iframe.
Replit:
Replit is a cloud-based code editor that allows you to write code in over 50 programming languages, including HTML, CSS, and JavaScript. They offer an embedded code snippet feature that you can use to add code to your blog.
You can access this platform in the following ways,
a. If you are a new user, visit the Replit website and sign up. Then click the "Create Repl" button in the top left corner.
b. If you are already logged in, go to your browser and type "https://replit.com/new" on the address bar.
You can choose many different language templates, I am going to choose the "HTML, CSS, JS" template. Give a title to your repl and hit the "+ Create Repl" button.
After adding the code and saving it, copy the link of the repl from the address bar.
I am referencing the Repl docs to get the iframe code and to understand the embedding instructions.
<iframe src="<YOUR REPL LINK>?embed=true" width="600" height="400"> </iframe>Add your reply link in place of "<YOUR REPL LINK>" (e.g. https://replit.com/@user/repl-name) and add "?embed=true" after the link.
<iframe src="https://replit.com/@Kamiya/FlawedLavenderUserinterface?embed=true" width="600" height="400" />We can add themes to our snippet.
<!-- For light theme --> <iframe src="<YOUR REPL LINK>?embed=true&theme=light" width="600" height="400" /> <!-- For dark theme --> <iframe src="<YOUR REPL LINK>?embed=true&theme=dark" width="600" height="400" />Replit is a great platform for multiple languages code embed. I have added my code iframe below.
Glitch:
Glitch is a community-driven platform for creating web applications. They offer an embedded console feature that you can use to create and run code snippets, and you can embed the console in your blog.
To work with this platform, open the Glitch website, and click on "Discover" present on Navbar.
Then click on the Basic website's "blank version" link for HTML, CSS and Javascript template.
After adding your code, click on "Settings" on the left sidebar.
Then click on "Embed this app".
You can select the default view for the snippet, whether you want to show code or app in your blog when it first loads. You can show or hide the attributions. You can copy the iframe code or the medium link for the snippet.
I copied the medium link and added in the iframe code shown below.
<iframe src="https://glitch.com/embed/#!/embed/sore-abaft-mandible?path=index.html&previewSize=0&attributionHidden=false&sidebarCollapsed=false&previewFirst=false" width="100%" height="400"></iframe>The Anonymous projects created with Glitch expire in 5 days. So make sure to create an account for it to persist.
Glitch is a nice platform for generating code snippets. I have attached my iframe created with Glitch below.
CodeSandbox:
CodeSandbox is an online code editor that allows you to write HTML, CSS, and JavaScript code and see the results in real-time. They offer an embedded console feature that you can use to create and run code snippets, and you can embed the console in your blog.
To do this, Go to the CodeSandbox website and sign up or log in. Then click on the "+Create" button in the top right corner. Then choose Create a sandbox.
Select a template. I will be choosing the "HTML+CSS" template.
Add a name and click on the "Create Sandbox button".
After adding your code, click on the "Share" button in the top right corner of the screen.
Click on the "Embed" button.
You can customize the layout, and the default file, hide or show navigation and show or hide the console for the embedded code. Click on the "</> Copy embed code" button. Paste the code into your blog or website where you want the console to appear.
CodeSandbox is an amazing platform for creating embedding consoles. I have added the embedded code below.
Conclusion
In conclusion, By using any of these five methods, you can easily embed a console/code snippet in your blog or website and give your readers an interactive experience.
References
"5 Best Online Code Editors for Web Developers" by Adam the Automator on ITPro Today: itprotoday.com/web-development/5-best-onlin..
"5 Ways to Embed Code Snippets in Your Website" by HubSpot: blog.hubspot.com/marketing/embed-code-snipp..
"How to Add a Console to Your Website or Blog" by Daniel Lamb on Medium: medium.com/@daniellamb/how-to-add-a-console..
Embedding repls: https://docs.replit.com/hosting/embedding-repls
Embedding glitch public projects:https://help.glitch.com/hc/en-us/articles/16287497353997-Embedding-a-Project