Code Block

Stable

A component for displaying syntax-highlighted code with optional line numbers and copy functionality

<script setup lang="ts">
import { HCodeBlock } from '@holistics/design-system'

const code = `function greet(name: string) {
  return \`Hello, \${name}!\`
}

greet('World')`
</script>

<template>
  <HCodeBlock
    :code="code"
    lang="typescript"
  />
</template>

Loading languages

Languages must be loaded before use. Load them once during app initialization:

import { getHighlighter } from '@holistics/design-system'

async function initShikiLanguages() {
  const highlighter = await getHighlighter()
  await highlighter.loadLanguage(
    import('@shikijs/langs/javascript'),
    import('@shikijs/langs/sql'),
    import('@shikijs/langs/typescript'),
    // Add more languages as needed
  )
}

// Await during app setup to ensure languages are loaded before rendering
await initShikiLanguages()

See shiki languages for the full list of supported languages.

Examples

With line numbers

<script setup lang="ts">
import { HCodeBlock } from '@holistics/design-system'

const code = `SELECT users.id, users.name, users.email, users.created_at, orders.id AS order_id, orders.total, orders.status, orders.created_at AS order_date
FROM users
INNER JOIN orders ON users.id = orders.user_id
LEFT JOIN order_items ON orders.id = order_items.order_id
WHERE orders.status = 'completed' AND orders.created_at >= '2024-01-01' AND users.email LIKE '%@example.com'
GROUP BY users.id, users.name, users.email, users.created_at, orders.id, orders.total, orders.status, orders.created_at
ORDER BY orders.created_at DESC`
</script>

<template>
  <div class="max-w-lg">
    <HCodeBlock
      :code="code"
      lang="sql"
      show-line-numbers
      overflow="scroll"
    />
  </div>
</template>

Overflow behavior

Control how long lines are handled: wrap (default) breaks lines, scroll enables horizontal scrolling.

<script setup lang="ts">
import { HCodeBlock } from '@holistics/design-system'

const code = `const config = { apiUrl: 'https://api.example.com', timeout: 5000, retries: 3, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token' } }

const fetchData = async (endpoint) => { const response = await fetch(config.apiUrl + endpoint, { headers: config.headers }); return response.json() }

const processResults = (data) => { return data.items.map(item => ({ id: item.id, name: item.name, value: item.value, timestamp: new Date().toISOString() })) }`
</script>

<template>
  <div class="flex max-w-md flex-col gap-4">
    <div>
      <p class="mb-2 text-sm text-secondary">
        Wrap (default)
      </p>
      <HCodeBlock
        :code="code"
        lang="javascript"
        overflow="wrap"
      />
    </div>
    <div>
      <p class="mb-2 text-sm text-secondary">
        Scroll
      </p>
      <HCodeBlock
        :code="code"
        lang="javascript"
        overflow="scroll"
      />
    </div>
  </div>
</template>

API

Props

Name	Type	Description
code *	string	The code string to be highlighted
lang	string = "plaintext"	The language for syntax highlighting (e.g., 'typescript', 'python'). Defaults to 'plaintext'
theme	string = DEFAULT_THEME	The theme for syntax highlighting. Defaults to 'aml-theme'
codeClass	HTMLAttributeClass = ""	CSS classes to apply to the code container
showCopyButton	boolean = true	Whether to show the copy button
showLineNumbers	boolean	Whether to show line numbers on the left side
overflow	"wrap" | "scroll" = "wrap"	Overflow behavior for code lines: 'wrap' (default) or 'scroll'

Events

Name	Parameters	Description
@copied	[value: string]