<Showcase />

import { createHighlighter } from '@lumis-sh/lumis'
import { htmlMultiThemes } from '@lumis-sh/lumis/formatters'
import typescript from '@lumis-sh/wasm-typescript'
import latte from '@lumis-sh/themes/catppuccin_latte'
import frappe from '@lumis-sh/themes/catppuccin_frappe'

const hl = await createHighlighter({ languages: [typescript] })

const html = hl.highlight(source, htmlMultiThemes({
  language: typescript,
  themes: { light: latte, dark: frappe },
  defaultTheme: 'light-dark()',
}))

import elixir from '@lumis-sh/wasm-elixir'
import heex from '@lumis-sh/wasm-heex'
import markdown from '@lumis-sh/wasm-markdown'

const hl = await createHighlighter({
  languages: [elixir, heex, markdown],
})

const html = hl.highlight(source, htmlMultiThemes({
  language: elixir,
  themes: { light: latte, dark: frappe },
  defaultTheme: 'light-dark()',
}))

const hl = await createHighlighter({
  languages: [markdown, rust, javascript],
})

const html = hl.highlight(readme, htmlMultiThemes({
  language: markdown,
  themes: { light: latte, dark: frappe },
  defaultTheme: 'light-dark()',
}))

import { erb } from '@lumis-sh/wasm-embedded-template'
import html from '@lumis-sh/wasm-html'
import ruby from '@lumis-sh/wasm-ruby'

const hl = await createHighlighter({ languages: [erb, html, ruby] })

const output = hl.highlight(template, htmlMultiThemes({
  language: erb,
  themes: { light: latte, dark: frappe },
  defaultTheme: 'light-dark()',
}))

const html = hl.highlight(source, htmlMultiThemes({
  language: rust,
  themes: { light: latte, dark: frappe },
  defaultTheme: 'light-dark()',
  highlightLines: {
    lines: [[3, 6]],
    style: 'background: light-dark(#dce0e8, #414559)',
  },
}))

const html = hl.highlight(source, htmlMultiThemes({
  language: javascript,
  themes: { light: latte, dark: frappe },
  defaultTheme: 'light-dark()',
}), { rainbowBrackets: true })

import dracula from '@lumis-sh/themes/dracula'
import nord from '@lumis-sh/themes/nord'
import githubLight from '@lumis-sh/themes/github_light'
import tokyonightMoon from '@lumis-sh/themes/tokyonight_moon'

for (const theme of [dracula, nord, githubLight, tokyonightMoon]) {
  render(hl.highlight(source, htmlInline({ language: elixir, theme })))
}

<link rel="stylesheet" media="(prefers-color-scheme: light)"
      href="https://cdn.jsdelivr.net/npm/@lumis-sh/themes/dist/css/catppuccin_latte.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)"
      href="https://cdn.jsdelivr.net/npm/@lumis-sh/themes/dist/css/catppuccin_frappe.css">

<script type="module">
  const html = hl.highlight(source, htmlLinked({ language: css }))
</script>

const html = hl.highlight(source, htmlMultiThemes({
  language: typescript,
  themes: { light: latte, dark: frappe },
  defaultTheme: 'light-dark()',
  header: {
    openTag: '<figure><figcaption>formatPrice.ts</figcaption>',
    closeTag: '</figure>',
  },
}))

const tokenTable = {
  language: javascript,
  render(source, events) {
    const bytes = new TextEncoder().encode(source)
    const scopes = []
    const rows = []
    for (const event of events) {
      if (event.type === 'start') scopes.push(event.scope)
      if (event.type === 'end') scopes.pop()
      if (event.type !== 'source') continue
      const text = new TextDecoder().decode(bytes.subarray(event.start, event.end))
      const scope = scopes.at(-1)
      if (scope && text.trim()) rows.push(scope.padEnd(24) + text)
    }
    return rows.join('\n')
  },
}

const table = hl.highlight(source, tokenTable)

import { terminal } from '@lumis-sh/lumis/formatters'

const ansi = hl.highlight(source, terminal({ language: json, theme: frappe }))
process.stdout.write(ansi)

import { bbcodeScoped } from '@lumis-sh/lumis/formatters'

const bbcode = hl.highlight(source, bbcodeScoped({ language: json }))