Syntax appearance review

Identical source and type size. Compare comments, punctuation, strings, and functions. These themes are examples, not a ranking of the engines.

Soft violet, blue, and green accents.

// Keep the original order.
type User = { name: string; active: boolean }

export function activeNames(users: User[]) {
  return users.filter(user => user.active)
    .map(user => user.name)
}

Light themes

Honest Prose · Violet

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}

Prism · Default

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}

highlight.js · GitHub

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}

Shiki · GitHub light

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}

Dark themes

Honest Prose · Violet

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}

Prism · Tomorrow

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}

highlight.js · GitHub Dark

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}

Shiki · GitHub dark

// Keep the original order.
export function activeNames(users) {
  return users.filter(user => user.active)
    .map(user => `Hello, ${user.name}`)
}