This post explains how to use the python, typescript, rust, and cpp shortcodes to create interactive, runnable code snippets in your blog posts.

Introduction

Interactive code snippets allow readers to run and experiment with code directly in their browsers without setting up a development environment. Our website now supports this feature for Python (using Pyodide, a port of CPython to WebAssembly), TypeScript (using the TypeScript compiler in the browser), Rust (using compilation services), and C++ (using WebAssembly).

Python Shortcode

Basic Usage

To add a runnable Python code snippet to your post, use the python shortcode like this:

{{< python >}}
# Your Python code here
print("Hello, world!")
{{< /python >}}

This will create a code block with a “Run” button. When clicked, the code will execute and the output will be displayed below the code.

Here’s a live example:

Python Code
Loading Pyodide...
Output:

Using Python Libraries

Pyodide includes many standard library modules and popular packages like NumPy, Pandas, Matplotlib, and more. When you import these libraries in your code, Pyodide will automatically load them.

Here’s an example using NumPy:

Python Code
Loading Pyodide...
Output:

Creating Visualizations

You can even create visualizations using Matplotlib:

Python Code
Loading Pyodide...
Output:

Interactive Examples

You can create more complex examples that demonstrate algorithms or concepts:

Python Code
Loading Pyodide...
Output:

TypeScript Shortcode

Basic Usage

To add a runnable TypeScript code snippet to your post, use the typescript shortcode like this:

{{< typescript >}}
// Your TypeScript code here
console.log("Hello from TypeScript!");
{{< /typescript >}}

This creates an interactive code block with syntax highlighting and a “Run” button. When clicked, the TypeScript code is compiled to JavaScript and executed, with the output displayed below.

Here’s a live example:

TS Code
Compiling TypeScript...
Compilation successful
Output:

Using TypeScript Features

There is type-checking too (Work-in-process)!

TS Code
Compiling TypeScript...
Compilation successful
Output:

The above should not compile (The above example is still compiling - need to incorporate type checking into the shortcodes, still a work in progress).

The TypeScript shortcode supports all standard TypeScript features, including interfaces, types, classes, and more:

TS Code
Compiling TypeScript...
Compilation successful
Output:

Working with Arrays and Objects

TypeScript provides excellent type safety for working with collections:

TS Code
Compiling TypeScript...
Compilation successful
Output:

Async Operations

TypeScript handles async operations elegantly with type safety:

TS Code
Compiling TypeScript...
Compilation successful
Output:

Rust Shortcode

Basic Usage

To add a runnable Rust code snippet to your post, use the rust shortcode like this:

{{< rust >}}
// Your Rust code here
fn main() {
    println!("Hello from Rust!");
}
{{< /rust >}}

This creates an interactive code block with syntax highlighting and a “Run” button. When clicked, the Rust code is compiled and executed remotely, with the output displayed below.

Here’s a live example:

Rust Code
Compiling Rust...
Compilation successful
Output:

Using Rust Features

The Rust shortcode supports many standard Rust features, including structs, enums, traits, and more:

Rust Code
Compiling Rust...
Compilation successful
Output:

Working with Collections

Rust provides powerful, safe ways to work with collections:

Rust Code
Compiling Rust...
Compilation successful
Output:

Error Handling and Result Type

Rust’s approach to error handling is both powerful and expressive:

Rust Code
Compiling Rust...
Compilation successful
Output:

Ownership and Borrowing

Demonstrate Rust’s unique ownership system with this example:

Rust Code
Compiling Rust...
Compilation successful
Output:

C++ Shortcode

Basic Usage

To add a runnable C++ code snippet to your post, use the cpp shortcode like this:

{{< cpp >}}
// Your C++ code here
#include <iostream>

int main() {
    std::cout << "Hello from C++!" << std::endl;
    return 0;
}
{{< /cpp >}}

This creates an interactive code block with syntax highlighting and a “Run” button. When clicked, the C++ code is compiled and executed using WebAssembly, with the output displayed below.

Here’s a live example:

C++ Code
Compiling C++...
Compilation successful
Output:

Using C++ Features

The C++ shortcode supports many standard C++ features, including classes, templates, and more:

C++ Code
Compiling C++...
Compilation successful
Output:

Working with STL Containers

C++ provides powerful containers and algorithms through the Standard Template Library (STL):

C++ Code
Compiling C++...
Compilation successful
Output:

Templates and Generic Programming

C++ templates enable powerful generic programming:

C++ Code
Compiling C++...
Compilation successful
Output:

Memory Management and Smart Pointers

Demonstrate C++’s modern memory management with smart pointers:

C++ Code
Compiling C++...
Compilation successful
Output:

C++ Examples

Let’s explore some C++ code examples that you can run directly in the browser.

Simple Calculator in C++

C++ Code
Compiling C++...
Compilation successful
Output:

Fibonacci Sequence in C++

C++ Code
Compiling C++...
Compilation successful
Output:

Object-Oriented Programming in C++

C++ Code
Compiling C++...
Compilation successful
Output:

Important Considerations

When using these interactive code shortcodes, keep these things in mind:

For Python:

  1. Loading Time: Pyodide may take a moment to load on the first execution, especially on slower connections.

  2. Package Availability: While many packages are available, not all Python packages can be used with Pyodide.

  3. Performance: Complex computations may run slower in the browser than they would in a native Python environment.

  4. Memory Limitations: Browser environments have memory limitations, so very large datasets may cause problems.

For TypeScript:

  1. Browser API Limitations: The TypeScript code runs in a sandboxed environment, so some browser APIs may not be available.

  2. No External Imports: You cannot import external modules or packages in the TypeScript snippets.

  3. Compilation Errors: TypeScript errors are displayed in the output area, making it easy to debug code.

  4. No Persistent State: Each execution starts with a fresh environment; state is not maintained between runs.

For Rust:

  1. Remote Execution: Rust code is compiled and executed on remote servers, which may have usage limitations or occasional downtime.

  2. Compilation Time: Rust compilation may take a few seconds, especially for larger code examples.

  3. Standard Library: Most standard library features are available, but some platform-specific functionality may be restricted.

  4. Memory and Time Limits: There are memory and execution time limits for the compiled code.

For C++:

  1. WebAssembly Limitations: The C++ code is compiled to WebAssembly, which has some limitations compared to native C++.

  2. Standard Library Support: Most of the C++ standard library is available, but some features may be restricted.

  3. Compilation Time: Complex C++ code may take longer to compile in the browser environment.

  4. Memory Management: While the examples demonstrate memory management, the actual behavior in the WebAssembly environment might differ slightly from native C++.

General Considerations:

  1. Security: Code runs either in the user’s browser or on remote servers, so avoid including sensitive information or operations.

  2. Mobile Compatibility: The interactive code blocks work on mobile devices but may have limited screen space.

Conclusion

The python, typescript, rust, and cpp shortcodes make your blog posts more interactive and engaging by allowing readers to experiment with code directly. This is particularly useful for tutorials, educational content, or demonstrating programming concepts.

Experiment with Python, TypeScript, Rust, and C++ in your posts and let us know how they work for you!