Svelte and mdsvex for JetBrains IDEs

<script lang="ts">
  // Runes are keywords, not function calls — the Svelte docs are explicit
  // about that, so they get a keyword colour rather than reading as calls.
  let { label = 'Clicks', onchange }: Props = $props();

  let count = $state(0);
  let doubled = $derived(count * 2);

  // Only DOCUMENTED sub-forms are absorbed into the rune…
  let history = $derived.by(() => {
    return Array.from({ length: count }, (_, i) => i + 1);
  });

  // …so a typo like this stays visibly a typo: $state, dot, identifier.
  let oops = $state.nope(0);

  $effect.pre(() => {
    document.title = `${label}: ${count}`;
  });
</script>

<button class="counter" onclick={() => count++}>
  {label}: {count} — doubled {doubled}
</button>

<style>
  /* Real CSS, from the IDE's own engine: selector, property and value
     each get their own colour, plus swatches and completion. */
  .counter {
    background: #ff5722;
    border-radius: 6px;
    padding: 0.5rem 1rem;
  }

  .counter:hover { filter: brightness(1.1); }
</style>

<!--
  Every {#…} block below folds, and so does this comment.
  The gutter arrows mark exactly what the editor collapses.
-->
{#await loadPosts()}
  <p class="loading">Loading…</p>
{:then posts}
  {#each posts as post, i (post.id)}
    {#if post.featured}
      <Featured {post} />
    {:else if i < 3}
      <article>
        <h2>{post.title}</h2>
        {@html post.excerpt}
      </article>
    {/if}
  {:else}
    <p class="empty">Nothing published yet.</p>
  {/each}
{:catch error}
  <p class="error">{error.message}</p>
{/await}

{#key page.id}
  <Chart data={page.stats} />
{/key}

{#snippet row(label, value)}
  <tr><th>{label}</th><td>{value}</td></tr>
{/snippet}

{@render row('Total', total)}

<!-- Not real syntax, and deliberately not coloured as if it were: -->
{:nope}

---
title: Shipping Svelte 5 runes
date: 2026-07-14
tags: [svelte, mdsvex]
---

<script>
  import Chart from '$lib/Chart.svelte';
  let views = $state(1_204);
</script>

# {title}

Published **{date}**, filed under _mdsvex_.

Prose and components share one document. This paragraph has `inline code`,
a [link](https://mdsvex.pngwn.io/), and a live count of {views} views —
markdown and Svelte, highlighted at the same time.

## What you are looking at

- Headings, **emphasis** and list markers are markdown
- `{expressions}` and <Chart data={views} /> are still Svelte
- Frontmatter above is YAML

```svelte
<!-- Inside a fence this is literal text, not markup. -->
{#if ready}<p>{value}</p>{/if}
```

> Indenting four spaces does nothing in mdsvex, so the plugin
> deliberately refuses to colour it as a code block.

---

<Chart data={views} height={240} />

<script>
  import { fade, fly } from 'svelte/transition';
  import { tooltip } from '$lib/actions';

  let name = $state('');
  let open = $state(false);
</script>

<svelte:window on:keydown={handleKey} />

<svelte:head>
  <title>{name || 'Untitled'}</title>
</svelte:head>

<form on:submit|preventDefault={save}>
  <input bind:value={name} use:tooltip={'Your name'} placeholder="Name">

  <div class:is-open={open} style:--gap="8px" transition:fly={{ y: 8 }}>
    <Panel bind:this={panel} let:item {...rest} />
  </div>

  <button in:fade out:fade animate:flip onclick={() => (open = !open)}>
    Toggle
  </button>

  <!-- `data-open` is a plain attribute: no directive prefix, no keyword colour. -->
  <span data-open={open}>{open ? 'open' : 'closed'}</span>
</form>