An embeddable interactive code editor.

static MYSTRING: &str = "Hello World from a file!"; use std::fs::File; use std::io::prelude::*; use std::path::Path; fn main() { let path = Path::new("output.txt"); let display = path.display(); let mut file = match File::create(&path) { Err(why) => panic!("couldn't create {}: {}", display, why.to_string()), Ok(file) => file, }; match file.write_all(MYSTRING.as_bytes()) { Err(why) => panic!("couldn't write to {}: {}", display, why.to_string()), Ok(_) => println!("successfully wrote to {}", display), } }

What is codefence?

codefence.io is an easy to embed editor and compiler for over 25 server-side programming languages.

Everything is run securely inside dedicated sandboxed Docker containers and, once executed, destroyed. We never store your code on our servers, and only the results are cached (you can opt-out of this as well).

Perfect for examples, tutorials, and technical documentation, allowing the reader to interact with the code and make changes.

Hosted on the global CDN and cached with , we provide the best possible experience for your readers.

Features

High performance 16 core AMD Epyc powered sandboxes
Support for over 25 server-side programming languages
Sandboxes run on the latest Ubuntu LTS
Multipile versions of a many different languages
Secure private environments
No language limitations or sandbox restrictions
Inbound network access
Capture and display std::out and std::err
Binary and ASCII mode file exporting
CDN hosted sandbox artifacts
Embedded artifacts directly in the results
Simple testing utilities to check results

Supported Languages

Ada gnatmake 7.5.0
C / C++ gcc 10.0.1
C# .NET Core 6.0.300 with dotnet-script
Clojure 1.10.3.1087 with Java adoptopenjdk-18.0.1+10
Crystal 1.4.1 with LLVM 8.0.0
D dmd 2.100.0
Dart 2.17.3
Elixir 1.13.4 with Erlang 25.0.1
Erlang 25.0.1
Forth gforth 0.7.3
GNU Assembly gcc 7.5.0
Go 1.18.3
Haskell 9.0.2
Java adoptopenjdk-18.0.1+10
JavaScript Nodejs 16.15.1

Kotlin 1.7.0 with Java adoptopenjdk-18.0.1+10
Lua 5.4.4
Perl 5.36.0
PHP 8.1.7
Python 3.10.5
R 4.2.0
Raku rakudo-moar-2022.06-01
Ruby 3.1.2
Rust 1.61.0
Scala 2.11.8 with Java adoptopenjdk-18.0.1+10
Swift 5.6.1
TypeScript Deno 1.22.2
Zig 0.9.1

See the Hello World section below for an example of all supported languages.

We try to keep the latest version available, if something is out of date or if you would like to request other languages, let us know.

Getting Started Usage Examples Caching Versions Testing Hello World

With WordPress

If you are using WordPress, we have a plugin available, all you have to do is install our plugin and you will find a codefence block directly inside the Gutenber editor.

With GatsbyJS

If you are using Gatsby, James Simone wrote a plugin thats hooks into gatsby-transformer-remark to add codefence support.

All other sites

It's simple, just add this snippet somewhere in your pages head.

<link href="//codefence.io/codefence.css" rel="stylesheet">
<script defer type="text/javascript" src="//codefence.io/codefence.js"></script>

Component Usage

<code-fence switcher="true" lang="language" version="version" heading="heading" artifact="fileA.ext,fileB.ext">
<textarea vue-slot="code">
// your code here
</textarea>
</code-fence>

The switcher attribute allows the language to be changed dynamically.

The lang attribute should be the extension or short name of the language you'd like the editor to function in (e.g., py or python, rust or rs).

The version attribute allows you to target different versions of a language, see the version section for more information.

The heading attribute allows you to set the components styled heading.

The artifact attribute allows you to specify a single file or comma-separated list of files to be exported and included in the resulting output. codefence embeds exported files for the text/plain, image/*, and video/* mime types; others render as a link. We automatically delete artifacts after 1 day, so we do not recommend hotlinking to them.

Example Usages

This is a simple example with no heading and no artifact.

<code-fence lang="js">
<textarea vue-slot="code">
console.log("Hello World from Node!");
</textarea>
</code-fence>

You can also enable a language switcher to allow dynamic language selection.

<code-fence lang="js" switcher="true" heading="Dynamic Language Selection">
<textarea vue-slot="code">
// You can select the language to the right
</textarea>
</code-fence>

There may be times when you need to disable caching, to do that set cache="false" on the <code-fence /> element.

<code-fence lang="haskell" cache="false" heading="Disable Caching">
<textarea vue-slot="code">
-- this example disables cache and will always compile on-demand
import Data.Time

main = do
    getCurrentTime >>= print
</textarea>
</code-fence>

This example targets a different language version.

<code-fence lang="lua" version="luajit-2.0.5" heading="LuaJIT 2.0.5">
<textarea vue-slot="code">
-- targeting luajit 2.0.5, codefence default is lua 4.4.4
print(jit.version)
</textarea>
</code-fence>

This is an example with a custom heading and ASCII mode file export.

<code-fence lang="rust" heading="Export a File" artifact="output.txt">
<textarea vue-slot="code">
static MYSTRING: &str = "Hello World from a file!";

use std::fs::File;
use std::io::prelude::*;
use std::path::Path;

fn main() {
  let path = Path::new("output.txt");
  let display = path.display();

  let mut file = match File::create(&path) {
      Err(why) => panic!("couldn't create {}: {}", display, why.to_string()),
      Ok(file) => file,
  };

  match file.write_all(MYSTRING.as_bytes()) {
      Err(why) => panic!("couldn't write to {}: {}", display, why.to_string()),
      Ok(_) => println!("successfully wrote to {}", display),
  }
}
</textarea>
</code-fence>

This is an example with a custom heading and an image mode file export.

<code-fence lang="py" heading="Export an Image" artifact="example.png">
<textarea vue-slot="code">
import matplotlib.pyplot as plt
import numpy as np

def fahrenheit2celsius(temp):
    return (5. / 9.) * (temp - 32)

def convert_ax_c_to_celsius(ax_f):
    y1, y2 = ax_f.get_ylim()
    ax_c.set_ylim(fahrenheit2celsius(y1), fahrenheit2celsius(y2))
    ax_c.figure.canvas.draw()

fig, ax_f = plt.subplots()
ax_c = ax_f.twinx()

ax_f.callbacks.connect("ylim_changed", convert_ax_c_to_celsius)
ax_f.plot(np.linspace(-40, 120, 100))
ax_f.set_xlim(0, 100)

ax_f.set_title('Two scales: Fahrenheit and Celsius')
ax_f.set_ylabel('Fahrenheit')
ax_c.set_ylabel('Celsius')

plt.savefig('example.png')
</textarea>
</code-fence>

How our caching works

We hash the contents and attributes of the element to generate an ETag, this re-validates responses on the server-side, only executing when code has changed. Responses are then cached on Fastly's global CDN to improve performance further.

If you would like to opt-out of caching, perhaps your code is date senesitive or for privacy reasons, set cache="false" on the <code-fence /> element.

How long we cache for

We cache successful compiles and CDN artifacts for 24 hours. Unsuccessful compiles are cached for 12 hours as long as we know why the compile failed; in the rare case we do not, they are not cached.

Language Versions

A codefence can target different language versions using the version="version" attribute.

Here are a list of versions available:

C
- 10.0.1 (default) -Wall -std=c11
- 9.3.0 -Wall -std=c11
- 8.4.0 -Wall -std=c11
- 7.5.0 -Wall -std=c11
C++
- 10.0.1 (default) -Wall -std=c++2a
- 9.3.0 -Wall -std=c++17
- 8.4.0 -Wall -std=c++14
- 7.5.0 -Wall -std=c++11
Lua
- 5.4.4 (default)
- 5.3.6
- 5.2.4
- 5.1.5
- luajit-2.0.5

If you would like to request other versions, let us know and we'll see about adding it.

Testing

codefence has a very simple testing utility, allowing you to verify console and file output.

Output is checked against the supplied test regex. You can provide more than a single test, each in it's own slot.

You can also check against ASCII mode artifacts by setting the file attribute.

<code-fence lang="js" heading="Hello World with Tests" artifact="test.txt">
<textarea vue-slot="code">
const fs = require('fs');
const name = "Ben";
console.log(`Hello ${name}, how are you today?`);
fs.writeFile('test.txt', `Hello ${name}, how are you today?`, function (err) {
  if (err) return console.log(err);
});
</textarea>
<textarea vue-slot="test" name="Test Output">
Hello .+, from the console\.
</textarea>
<textarea vue-slot="test" file="test.txt" name="Test Output">
Hello .+, from a file\.
</textarea>
</code-fence>

Hello World

Here you can find a Hello World in all supported languages. Feel free to play around and try your own code!

Code is ran as a script, or .csx file using dotnet-script. Please refer to their documentation for any differences between .cs and .csx files.

We require you to use the namespace main, (e.g. (ns main)) and function definition main (e.g. defn -main).

We require you to use the module main, (e.g. -module(main)) and export the start function (e.g. -export([start/0])).

GNU Assembly is compiled with these flags, -nostdlib -no-pie.

We require you to use the class Main, (e.g. class Main { }).

We require you to use the object Main, (e.g. object Main { }).