Code

---
import { Code } from '@santi020k/lumen-astro'

const themeExample = `
  const theme = "lumen";
  const accent = "hsl(var(--accent))";
`

const workflowExample = `
  name: Lumen checks
  on:
    pull_request:
  jobs:
    validate:
      runs-on: ubuntu-latest
      steps:
        - run: pnpm validate
`
---

<div class="grid gap-4">
  <p>Apply the current theme with <Code>data-theme</Code> on the root element.</p>
  <Code code={themeExample} copy label="theme.ts" language="ts" variant="block" />

  <p>Wrap prose-like output or long commands when horizontal scrolling would obscure the content.</p>
  <Code
    code={workflowExample}
    copy
    label=".github/workflows/validate.yml"
    language="yaml"
    variant="block"
    wrap
  />

  <p>Language colors come from the active Lumen semantic theme tokens without a Shiki setup.</p>
  <Code
    code="pnpm add @santi020k/lumen-astro"
    copy
    language="bash"
    variant="block"
  />

  <p>Override the syntax palette family with <Code>theme</Code>.</p>
  <Code code={themeExample} label="lumen" language="ts" theme="lumen" variant="block" />
  <Code code={themeExample} label="santi020k" language="ts" theme="santi020k" variant="block" />
</div>

import { Code } from '@santi020k/lumen-react'

const themeExample = `
  const theme = "lumen";
  const accent = "hsl(var(--accent))";
`

export const Example = () => (
  <Code code={themeExample} copy label="theme.ts" language="ts" variant="block" />
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-code data-code-theme="auto" variant="block">
  <figcaption class="ui-code__header">
    <span class="ui-code__dots" aria-hidden="true">
      <span class="ui-code__dot ui-code__dot--red"></span>
      <span class="ui-code__dot ui-code__dot--yellow"></span>
      <span class="ui-code__dot ui-code__dot--green"></span>
    </span>
    <span class="ui-code__meta">
      <span class="ui-code__language">ts</span>
      <span class="ui-code__label">theme.ts</span>
    </span>
  </figcaption>
  <pre><code>const theme = "lumen";
const accent = "hsl(var(--accent))";</code></pre>
</lumen-code>