Skip to main content Svelte Highlight v7.21.1

Editable highlight preview

Enter inserts newlines. Tab and Shift+Tab indent selected lines. Cmd/Ctrl+Z undoes, Shift+Z or Ctrl+Y redoes. The caret and selection survive re-highlight.
6
Engine 
interface User {
  id: number;
  name: string;
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};

resolvedEngine():

History stack (0 snapshots, at #0)
Live bound value (bind:code)
interface User {
  id: number;
  name: string;
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};
Last event
none

Same bind:code in other themes. Edits in one block show up in all of them.

atom-one-dark
interface User {
  id: number;
  name: string;
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};
nord
interface User {
  id: number;
  name: string;
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};

css-highlights engine: same bind:code, different themes side by side

Each instance registers its own CSS.highlights entries, so two editors on the same page can run different themes without one clobbering the other's colors.

github-dark
interface User {
  id: number;
  name: string;
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};
nord
interface User {
  id: number;
  name: string;
}

const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};

Rendered with LineNumbers

interface User {
  id: number;
  name: string;
}


const greet = (user: User): string => {
  return `Hello, ${user.name}!`;
};