Syntax highlighting in Markdown

This post demonstrates how code blocks automatically look on this website using Astro’s built-in Shiki syntax highlighting and our hyper-professional light theme.

Rust

Rust is known for memory safety. Here’s a quick example:

fn main() {
    let mut vec = Vec::new();
    vec.push(1);
    vec.push(2);

    for i in &vec {
        println!("Value: {}", i);
    }
}

Python

Python is incredibly readable and widely used:

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print([fibonacci(i) for i in range(10)])

TypeScript / React

Even though we’re using vanilla Astro, here is what a React component looks like:

import React, { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div className="flex flex-col gap-4">
            <p>Count: {count}</p>
            <button onClick={() => setCount(c => c + 1)}>
                Increment
            </button>
        </div>
    );
}

Bash

And something we all use:

#!/bin/bash
# Update the system
sudo apt update && sudo apt upgrade -y
echo "System updated successfully."

Inline Code

You can also use inline code blocks anywhere in a paragraph.

Code block styling is handled completely statically by Astro using Shiki during compile time. This means syntax highlighting requires exactly zero client-side JavaScript!