Skip to Main Content

Tutorial: Embedding Quorum Online

How to start embedding Quorum into your own website.

Embedding Quorum on the Web

On this page, we discuss how to embed the online Quorum Integrated Development Environment (IDE) and formatted Quorum source code. The Quorum Language website has online IDEs all over the site to allow users to run Quorum code in the browser and this feature can be made available on other websites through the use of the provided embedding scripts. The embed scripts and styles also allow for injecting Quorum source code examples that have similar highlighting as would be found in Quorum Studio. Here we will make a small example web page that embeds Quorum.

Making the Webpage

To show how to embed Quorum this page we will walk through making a basic HTML page that will link to the embed scripts and add Quorum examples and an IDE. In order to embed Quorum onto your own website you need to make changes to an HTML page and use Javascript. How to use those technologies will not be taught here so this page will assume you have previous knowledge of how to use these.

To start off we will have a blank html document that will have nothing in it but a header that says, Embed Quorum on My Own Page! The code for that will look like this: 

<!DOCTYPE html>
<html xml:lang= "en" lang= "en" >
   <head >
      <title >My Page</title>
      <meta charset= "UTF-8" >
      <meta content= "width=device-width, initial-scale=1" name= "viewport" >
   </head>
   <body >
      <main id="main" tabindex="-1" role = "main">
            <h1>Embed Quorum on My Own Page!</h1>

      </main>
   </body>
</html>

Starting with this simple page we will add a script and link a stylesheet in the head of the document like so:

<head>
      <title >My Page</title>
      <meta charset= "UTF-8" >
      <meta content= "width=device-width, initial-scale=1" name= "viewport" >
      <script src= "https://quorumlanguage.com/embed/embed-quorum.js"  type="text/javascript"></script>
      <link rel= "stylesheet" type= "text/css" href= "https://quorumlanguage.com/embed/embed-quorum.css" >
</head>

The important thing to note here is that there are links to files that live on the Quorum servers. These two files are "https://quorumlanguage.com/embed/embed-quorum.js" and "https://quorumlanguage.com/embed/embed-quorum.css." The javascript file adds two functions that can be used to inject Quorum examples and environments. The styling sheets will format the injected objects to make sure they render.

Now we will go to the body of the document and add script objects that will inject a code example. 

<script> 
    //get where you want to make a code example and add it.
    var body = document.getElementById("main");
    InjectQuorumCodeExample(body, "MyExample", "output \"Hello, World!\"")
</script>

This script object has code in it that grabs a container on the page and adds a Quorum example to it. The function named InjectQuorumCodeExample has 3 parameters: the container to add to, the name of the example to give as an id, and the code to put in the example. The name is so that the name of the object does not conflict with anything else on the page. With that script a code example will appear on the screen with line numbers and highlighting and will appear as the one below:

output "Hello, World"

Now you have Quorum embedding on your own page! To add more examples you can simply add more in that script object or call that function in your page however you like. Now you can also inject a Quorum environment that will allow you to type, compile, and run Quorum Code. An example of how to do this will be below. It is similar to how you would inject an example but now the function to call is InjectQuorumEnvironment.

<script> 
    //get where you want to make a quorum environment and add it.
    var body = document.getElementById("main");
    InjectQuorumEnvironment(body, "frontPage", "output 5");
</script>

Loading and viewing the page now will have the heading "Embed Quorum on My Own Page!" with a Quorum example and environment below it. The IDE is very similar to the one can be found all over the site, but it will be missing features that involve saving and loading the IDE from projects saved under an account.

That is all that is needed to embed Quorum on a website. Now you can add Quorum examples and environments wherever you want on your own site.

If you had trouble getting your page to work the completed example is below.

<!DOCTYPE html>
<html xml:lang= "en" lang= "en" >
<head>
      <title >My Page</title>
      <meta charset= "UTF-8" >
      <meta content= "width=device-width, initial-scale=1" name= "viewport" >
      <script src= "https://quorumlanguage.com/embed/embed-quorum.js"  type="text/javascript"></script>
      <link rel= "stylesheet" type= "text/css" href= "https://quorumlanguage.com/embed/embed-quorum.css" >
</head>
<body>
   <main id="main" tabindex="-1" role = "main">
      <h1>Embed Quorum on My Own Page!</h1>
      <script> 
         //get where you want to make a code example and add it.
         var body = document.getElementById("main");
         InjectQuorumCodeExample(body, "MyExample", "output \"Hello, World!\"")
      </script>
      <script> 
         //get where you want to make a quorum environment and add it.
         var body = document.getElementById("main");
         InjectQuorumEnvironment(body, "frontPage", "output 5");
      </script>
   </main>
</body>
</html>