💫

Expressive Code Twinkleplop

Expressive Code plugin to use Twinkleplop as a syntax highlighter: all the features you already use, at the speed of Twinkleplop.

Get Started

---
import Card from '../components/Card.astro'
import { getTitles } from '../posts'

const titles = await getTitles(3)
---

<section class="latest">
  <h2>Latest posts</h2>
  {titles.map((title) => (
    <Card {title} />
  ))}
</section>

<style>
  .latest {
    display: grid;
    gap: 1rem;
  }
</style>

.post {
  --accent: oklch(70% 0.15 250);

  border-inline-start: 2px solid var(--accent);
  padding: 0.5rem 1rem;
}

.post:hover h2 {
  color: var(--accent);
}

@media (min-width: 50rem) {
  .post {
    padding-inline: 2rem;
  }
}

<link rel="stylesheet" href="/posts.css" />

<article class="post">
  <h2><a href="/posts/hello-world/">Hello world</a></h2>
  <time datetime="2026-10-27">October 27, 2026</time>
  <p>My very <strong>first</strong> post.</p>
</article>

<script type="module">
  const time = document.querySelector('time')
  time.textContent = new Date(time.dateTime).toLocaleDateString()
</script>

[
  {
    "id": 1,
    "title": "Hello world",
    "slug": "hello-world",
    "publishedAt": "2026-10-27",
    "draft": false
  },
  {
    "id": 2,
    "title": "Coming soon",
    "slug": "coming-soon",
    "publishedAt": null,
    "draft": true
  }
]

struct Post {
    title: &'static str,
    draft: bool,
}

// Print the titles of all published posts.
fn main() {
    let posts = [
        Post {
            title: "Hello world",
            draft: false,
        },
        Post {
            title: "Coming soon",
            draft: true,
        },
    ];

    for post in posts.iter().filter(|post| !post.draft) {
        println!("{}", post.title);
    }
}

interface Post {
  id: number
  title: string
}

// Fetch the titles of recent blog posts.
export async function getTitles(limit = 5): Promise<string[]> {
  const response = await fetch(`https://example.com/posts?limit=${limit}`)
  const posts: Post[] = await response.json()
  return posts.map((post) => post.title)
}