Kodethon Screenshot

Above: A Kodethon Project embedded into a webpage. Not an actual embed.

Want to display code snippets and allow your viewers to run and edit them? Here's a new feature we think may help.

With this feature you can embed a Kodethon project directly into any webpage. Below is a quick demo video of what it looks like:

As shown from the video, there are two tabs: files and code. The files tab shows the available files in the project. In the code tab, viewers can see both your amazing code and your awesome description of it. But perhaps the most appealing feature is that:

You can allow your viewers to edit and run code directly in your blog.

Before we play with some examples, you may have some questions…

Answering Questions

Q: Who can use this feature?
A: Anyone! All you have to do is create a Kodethon project. And get its embed link. We believe that anyone who writes regularly about programming subjects like bloggers, tutorial writers, teachers, and researchers will find this feature useful. Here is an example of how you might incorporate this into a blog.
Q: When would I use this feature?
A: Anytime you want to share code in a webpage and want your users to play with the code. In other words, when you want them to edit the code and run it to see the effect of their changes.
Q: How does this compare to similar tools?
A: Currently, there a few code syntax highlighters out there: SyntaxHighlighter, highlight.js, Prism, and many others. But perhaps a more similar comparison is with JSFiddle. JSFiddle provides a way of embedding small HTML/CSS projects. In comparison, our embedding allows you to embed any type of project currently supported by Kodethon. This includes projects which normally do not run in the browser like C, Python, Java programs.

And now let’s with play with some examples:

Examples of Embedding

Below are examples of what embedding Kodethon in your blog could look like. Feel free to edit the files and click the 'Run' button.

1. Square Root in C

2. Square Root in Python

3. A Simple Java Hello World

Ready to create an embed? Let’s create one in three easy steps!

Creating an Embed

Step 1: Log in to your Kodethon account

If you haven't already, create an account with Kodethon.

Step 2: Create a Kodethon Project

The following link provides instructions on creating a project in Kodethon: https://support.kodethon.com/d/2-how-to-create-a-project

Step 3: Get the Embed Link from your project 'Settings'

The following link provides instructions on embedding a project: https://support.kodethon.com/d/22-how-to-embed-files