CloudEmbedding Interactive Code onto a Web Page

Embedding Interactive Code onto a Web Page

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Have you ever created an online training manual for your new developers or end users? Have those manuals ever included sample code listings or snippets for the developer or end user to see? Have you ever written an article that you wanted to share with the world on a site like Developer.com or a tip for DevX.com that included a self-contained code listing you wanted to share?

If so, odds are the code listing was presented in a static manner. For example, a Java listing could be presented similar to Listing 1:

Listing 1: A Java Main class

class Main {
  public static void main(String[] args) {
    Adder Myadder = new Adder();
    System.out.println(Myadder.add("Hello ", "World!"));    
    System.out.println(Myadder.add(101, 202));
    System.out.println(Myadder.add(1.5, 40.5));
    System.out.println("We did it!");
  }
}

Of course, the Java program in Listing 1 relies on a second file to run that contains code for the Adder class methods, which are presented in Listing 2:

Listing 2: The Adder class

public class Adder {
  public int add(int x, int y) {
    return(x+y);
  }

  public String add(String x, String y) {
    return(x+y);
  }

  public double add(double x, double y) {
    return(x+y);
  }
}

With the two listings in place, a reader is able to copy and paste the code into their favorite editor and then use a compiler to build and run the program. In fact, you could copy and paste the two listings into your favorite Java IDE, compile them, and run the program. When you do, you’d see results similar to the following:

Hello World!
303
42.0
We did it!

If only there was an easier way! In fact, it would be so much better if you didn’t have to leave this page to try the code. After all, once your attention shifts to your own IDE, you might not come back!

Using Repl.it and Embedding Code

There are several tools that let you actually embed code into a page. We’ll cover Repl.it in this article and show you how easy it is to use. Repl.it is an online development tool that lets you use any of over 50 languages to develop online without installing anything locally. To get an idea of what you can do with Repl.it, check out the article Repl.it: An Online Editor for Coding or Learning here on Developer.com. As you’ll see, it is a free tool that can be used from most browsers and mobile devices.

Once you have established an account on Repl.it (see the previously mentioned article), you’ll be able to create projects (called repls) where you can enter code, compile it, and run it right on the site. The tool allows you to share the code with others. This sharing can be collaborative or through creating a copy (fork) of the code. The two Java listings mentioned earlier have both been created using Repl.it.

You can also embed a project onto a web page just like this:

If you look at the above embedded object, you are going to see that it provides a lot of functionality. It contains the code listings, a run button, a console pane, and more. Clicking on the run button will display the results of compiling and executing the code in the console pane.

You can also change the code! To change the code, however, you’ll need to log into a Repl.it account or create one to use. A copy of the code will then be put into your account for you to make changes. That allows the original copy on the article to remain pristine for other readers.

The embedding is done using iFrames that hold Repl.it. For the above embedded code window, the following code was included on this article:

<iframe height=”400px” width=”100%” src=”https://repl.it/@zyvxn/DeveloperComEmbeddedRepl?lite=true” scrolling=”no” frameborder=”no” allowtransparency=”true” allowfullscreen=”true” sandbox=”allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals”></iframe>

This iFrame code can be automatically generated from the Repl.it site. When you have your project opened within Repl.it, you can select the Share button in the upper right side of the browser window. This will pull up the sharing dialog as shown in the following figure:

Repl.it

Simply click the “<> Copy embed code” button and the iFrame code will be copied to the clipboard. You can then paste it from there into your web page’s HTML code.

As you can see by looking at the embed code presented earlier, the iFrame contains a few parameters that can be changed, including borders and the size of the window. There is also a link to jump to the Repl.it site. In order for the repl (the embedded object) to work, you must keep the “?lite=true” parameter on the embedded link. If you only want to show the running code, you can hide the editor by adding “?outputonly=1” to the embedded URL. Note, however, that the user can still open the project on the repl.it site and get access to the code.

That’s all there is to it. With just a few steps, you gain the ability to add interactive code to your user manuals and other online products!

Note: On the Medium platform, you can simply paste a repl.it project URL into a page and it will convert it to the interactive environment automatically. On WordPress, you may need to make sure that repl.it is on your approved whitelist of sites. Additionally, if you paste a project URL into WordPress and choose embed if prompted, then it will automatically format a project URL to the embed code for you.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories