Interactive Python, TypeScript, and Rust Code Snippets

Learn how to add runnable Python, TypeScript, and Rust code snippets to your blog posts

This post explains how to use the python, typescript, and rust 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), and Rust (using compilation services).

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

# A simple Python example
print("Hello, world!")
for i in range(5):
    print(f"The square of {i} is {i*i}")

apple = 50 # Apple variable is shared across multiple code editors.

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

import numpy as np

# Create a random array
data = np.random.rand(5, 5)
print("Random 5x5 matrix:")
print(data)

# Calculate statistics
print(f"Mean: {np.mean(data):.4f}")
print(f"Max: {np.max(data):.4f}")
print(f"Min: {np.min(data):.4f}")

print("apple: ", apple) # Apple variable is shared across multiple code editors.

Loading Pyodide...

Output:

Creating Visualizations

You can even create visualizations using Matplotlib:

Python Code

import numpy as np
import matplotlib.pyplot as plt
from io import BytesIO
import base64

# Create data
x = np.linspace(0, 2*np.pi, 100)
y1 = np.sin(x)
y2 = np.cos(x)

# Create plot
plt.figure(figsize=(8, 4))
plt.plot(x, y1, label='sin(x)')
plt.plot(x, y2, label='cos(x)')
plt.title('Sine and Cosine Waves')
plt.xlabel('x')
plt.ylabel('y')
plt.legend()
plt.grid(True)

# Convert plot to image and display
buf = BytesIO()
plt.savefig(buf, format='png')
buf.seek(0)
img_str = base64.b64encode(buf.read()).decode('utf-8')
print(f'<img src="data:image/png;base64,{img_str}" />')

Loading Pyodide...

Output:

Interactive Examples

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

Python Code

def fibonacci(n):
    """Return the nth Fibonacci number."""
    if n <= 0:
        return 0
    elif n == 1:
        return 1
    else:
        return fibonacci(n-1) + fibonacci(n-2)

# Calculate and print the first 10 Fibonacci numbers
print("First 10 Fibonacci numbers:")
for i in range(10):
    print(f"fibonacci({i}) = {fibonacci(i)}")

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:

TypeScript Code

// A simple TypeScript example
console.log("Hello from TypeScript!");

// Type annotations
const message: string = "TypeScript is awesome";
const year: number = 2023;
const isEnabled: boolean = true;

console.log(`${message} in ${year}!`);
console.log(`Feature enabled: ${isEnabled}`);

Compiling TypeScript...

Compilation successful

Output:

Using TypeScript Features

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

TypeScript Code

const message: number = "TypeScript is awesome";
const year: number = 2023;
console.log(`${message} in ${year}!`);

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:

TypeScript Code

// Define an interface
interface Person {
  name: string;
  age: number;
  greet(): void;
}

// Implement the interface
class Employee implements Person {
  constructor(public name: string, public age: number, private role: string) {}
  
  greet(): void {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
  
  introduce(): void {
    console.log(`I work as a ${this.role}.`);
  }
}

// Create an instance
const employee = new Employee("Alice", 30, "Developer");
employee.greet();
employee.introduce();

Compiling TypeScript...

Compilation successful

Output:

Working with Arrays and Objects

TypeScript provides excellent type safety for working with collections:

TypeScript Code

// Type-safe arrays and objects
const numbers: number[] = [1, 2, 3, 4, 5];
const fruits: Array<string> = ["apple", "banana", "orange"];

// Array operations with TypeScript
const doubled = numbers.map((n: number): number => n * 2);
console.log("Doubled numbers:", doubled);

const filteredFruits = fruits.filter((fruit: string): boolean => fruit.length > 5);
console.log("Fruits with more than 5 characters:", filteredFruits);

// Type-safe object
interface Product {
  id: number;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: 1, name: "Laptop", price: 1200 },
  { id: 2, name: "Phone", price: 800 },
  { id: 3, name: "Tablet", price: 400 }
];

// Calculate total price
const totalPrice = products.reduce((sum, product) => sum + product.price, 0);
console.log(`Total price: $${totalPrice}`);

Compiling TypeScript...

Compilation successful

Output:

Async Operations

TypeScript handles async operations elegantly with type safety:

TypeScript Code

// Async function example
async function fetchData<T>(delay: number, data: T): Promise<T> {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Data fetched!");
      resolve(data);
    }, delay);
  });
}

// Using async/await
async function processData() {
  console.log("Fetching data...");
  
  try {
    const result = await fetchData(1000, { id: 123, name: "Sample Data" });
    console.log("Result:", result);
    
    const numbers = await fetchData(500, [1, 2, 3, 4, 5]);
    const sum = numbers.reduce((a, b) => a + b, 0);
    console.log("Sum:", sum);
  } catch (error) {
    console.error("Error:", error);
  }
}

// Run the async function
processData();

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

fn main() {
    // A simple Rust example
    println!("Hello from Rust!");
    
    // Display some numbers
    for i in 0..5 {
        println!("The square of {} is {}", i, i * i);
    }
}

Compiling Rust...

Compilation successful

Output:

Using Rust Features

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

Rust Code

// Define a struct
struct Person {
    name: String,
    age: u32,
}

// Implement methods for the struct
impl Person {
    fn new(name: &str, age: u32) -> Self {
        Person {
            name: String::from(name),
            age,
        }
    }
    
    fn greet(&self) {
        println!("Hello, my name is {} and I'm {} years old.", self.name, self.age);
    }
}

fn main() {
    // Create an instance of Person
    let person = Person::new("Alice", 30);
    person.greet();
}

Compiling Rust...

Compilation successful

Output:

Working with Collections

Rust provides powerful, safe ways to work with collections:

Rust Code

fn main() {
    // Working with vectors
    let mut numbers = vec![1, 2, 3, 4, 5];
    
    // Map operation (similar to other languages)
    let doubled: Vec<i32> = numbers.iter().map(|&n| n * 2).collect();
    println!("Doubled numbers: {:?}", doubled);
    
    // Filter operation
    let even_numbers: Vec<i32> = numbers.iter().filter(|&&n| n % 2 == 0).cloned().collect();
    println!("Even numbers: {:?}", even_numbers);
    
    // Push and modify
    numbers.push(6);
    numbers.push(7);
    println!("Updated vector: {:?}", numbers);
    
    // Using a HashMap
    use std::collections::HashMap;
    
    let mut scores = HashMap::new();
    scores.insert(String::from("Blue"), 10);
    scores.insert(String::from("Red"), 25);
    scores.insert(String::from("Green"), 15);
    
    println!("Scores: {:?}", scores);
    
    // Access and update
    if let Some(score) = scores.get_mut("Blue") {
        *score += 5;
    }
    
    println!("Updated Blue score: {:?}", scores.get("Blue"));
}

Compiling Rust...

Compilation successful

Output:

Error Handling and Result Type

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

Rust Code

fn divide(a: i32, b: i32) -> Result<i32, String> {
    if b == 0 {
        return Err(String::from("Cannot divide by zero"));
    }
    Ok(a / b)
}

fn main() {
    // Using the Result type for error handling
    let results = vec![
        divide(10, 2),
        divide(5, 0),
        divide(8, 4)
    ];
    
    for (i, result) in results.iter().enumerate() {
        match result {
            Ok(value) => println!("Result {}: {}", i, value),
            Err(error) => println!("Error in result {}: {}", i, error)
        }
    }
    
    // Using the ? operator for error propagation
    fn process_division() -> Result<(), String> {
        let result1 = divide(10, 2)?;
        println!("First division result: {}", result1);
        
        let result2 = divide(result1, 0)?; // This will return early with an Err
        println!("This line won't be reached!");
        
        Ok(())
    }
    
    println!("\nAttempting process_division:");
    match process_division() {
        Ok(_) => println!("All operations succeeded"),
        Err(e) => println!("An error occurred: {}", e)
    }
}

Compiling Rust...

Compilation successful

Output:

Ownership and Borrowing

Demonstrate Rust’s unique ownership system with this example:

Rust Code

fn main() {
    // Ownership example
    let s1 = String::from("hello");
    
    // s1 is moved into the function
    let (s2, len) = calculate_length_with_ownership(s1);
    
    // s1 is no longer valid here!
    // println!("s1: {}", s1); // This would cause a compilation error
    
    println!("s2: {}, length: {}", s2, len);
    
    // Borrowing example
    let s3 = String::from("world");
    
    // s3 is borrowed by the function
    let len = calculate_length_with_borrowing(&s3);
    
    // s3 is still valid here
    println!("s3: {}, length: {}", s3, len);
    
    // Mutable borrowing
    let mut s4 = String::from("hello");
    println!("Before: {}", s4);
    
    append_world(&mut s4);
    println!("After: {}", s4);
}

// Function that takes ownership
fn calculate_length_with_ownership(s: String) -> (String, usize) {
    let length = s.len();
    (s, length) // Return the string and its length
}

// Function that borrows its parameter
fn calculate_length_with_borrowing(s: &String) -> usize {
    s.len() // Return the length of the borrowed string
}

// Function that mutably borrows its parameter
fn append_world(s: &mut String) {
    s.push_str(" world");
}

Compiling Rust...

Compilation successful

Output:

Important Considerations

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

For Python:

Loading Time: Pyodide may take a moment to load on the first execution, especially on slower connections.
Package Availability: While many packages are available, not all Python packages can be used with Pyodide.
Performance: Complex computations may run slower in the browser than they would in a native Python environment.
Memory Limitations: Browser environments have memory limitations, so very large datasets may cause problems.

For TypeScript:

Browser API Limitations: The TypeScript code runs in a sandboxed environment, so some browser APIs may not be available.
No External Imports: You cannot import external modules or packages in the TypeScript snippets.
Compilation Errors: TypeScript errors are displayed in the output area, making it easy to debug code.
No Persistent State: Each execution starts with a fresh environment; state is not maintained between runs.

For Rust:

Remote Execution: Rust code is compiled and executed on remote servers, which may have usage limitations or occasional downtime.
Compilation Time: Rust compilation may take a few seconds, especially for larger code examples.
Standard Library: Most standard library features are available, but some platform-specific functionality may be restricted.
Memory and Time Limits: There are memory and execution time limits for the compiled code.

General Considerations:

Security: Code runs either in the user’s browser or on remote servers, so avoid including sensitive information or operations.
Mobile Compatibility: The interactive code blocks work on mobile devices but may have limited screen space.

Conclusion

The python, typescript, and rust 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, and Rust in your posts and let us know how they work for you!