Code Highlighting with Shiki

1. Svelte Component Test

This block tests how Shiki handles the Svelte syntax, including the script module, reactive statements ($: or$effect), and HTML templates.

<script lang="ts">
  import { onMount } from "svelte"

  let { count = 0 } = $props()
  let double = $derived(count * 2)

  $effect(() => {
    console.log(`Count changed to ${count}`)
  })
</script>

<div class="card">
  <h2>Counter: {count}</h2>
  <p>Doubled: {double}</p>

  <button onclick={() => count++}> Increment </button>
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
</style>

---

2. Inline Code Styles

This text contains inline code. It should look distinct from normal text. Here is a const x = 10; variable declaration inside a sentence. We need to ensure that rehype-shiki or our CSS correctly styles the <span class="shiki"> elements inline without breaking line height.

---

3. Long Line Overflow Test

The following Bash script contains an intentionally long line to test if your code block container handles overflow-x: auto correctly. If it breaks the layout, check your CSS max-width settings.

#!/bin/bash

# Simple install script
echo "Installing dependencies..."

# This line is extremely long to test the horizontal scrollbar behavior of the pre tag in your typography plugin settings.
export PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/user/.local/bin:/this/is/a/very/long/path/that/should/trigger/scrolling"

echo "Done!"

---

4. TypeScript & Interfaces

Testing intricate highlighting for types, interfaces, and generics.

type Result<T> = { success: true; data: T } | { success: false; error: string };

interface User {
  id: number;
  username: string;
  roles: ('admin' | 'user' | 'guest')[];
}

async function fetchUser(id: number): Promise<Result<User>> {
  try {
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    return { success: true, data };
  } catch (e) {
    return { success: false, error: (e as Error).message };
  }
}

---

5. Rust (System Programming)

Testing distinct keyword colors (lifetime annotations 'a, macros println!).

use std::collections::HashMap;

fn main() {
    let mut scores = HashMap::new();

    scores.insert(String::from("Blue"), 10);
    scores.insert(String::from("Yellow"), 50);

    for (key, value) in &scores {
        println!("{}: {}", key, value);
    }

    // Test lifetime syntax
    let string1 = String::from("long string is long");
    let result;
    {
        let string2 = String::from("xyz");
        result = longest(string1.as_str(), string2.as_str());
    }
    println!("The longest string is {}", result);
}

fn longest<'a>(x: &'a str, y: &'a str) -> &'a str {
    if x.len() > y.len() { x } else { y }
}

---

6. JSON Data

{
  "project": "SvelteKit Blog",
  "version": "1.0.0",
  "dependencies": {
    "svelte": "^5.0.0",
    "unified": "^11.0.0",
    "rehype-shiki": "^0.0.1"
  },
  "features": ["Markdown Parsing", "Syntax Highlighting", "Math Support"]
}