UxCodeBlock

components/ux/CodeBlock.vue

Code block with copy button, optional labeled header, collapse toggle, dark/light themes, a line-number gutter, and optional syntax highlighting (lang).

Vue
import { QMap } from '@qpoint-io/qmap'
Scenarios
nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@qpoint-io/q-nuxt-layer'],
})
npm install @qpoint-io/q-nuxt-layer
const aVeryLongSingleLineThatShouldScrollHorizontallyInsteadOfWrapping = useSomething({ retries: 3, timeoutMs: 30000, backoff: 'exponential' })
export default defineNuxtConfig({
  extends: ['@qpoint-io/q-nuxt-layer'],
})
// a long trailing comment that scrolls sideways under a fixed gutter a long trailing comment that scrolls sideways under a fixed gutter a long trailing comment that scrolls sideways under a fixed gutter 
dark + lineNumbers
export default defineNuxtConfig({
  extends: ['@qpoint-io/q-nuxt-layer'],
})
SKILL.md · lang=markdown
---
name: deploy
description: Ship a service through the Meridian release train
allowed-tools: Bash(git:*), Bash(scripts/*), Read
version: 2
---
# Deploy

Ship the current branch to a named environment. **Never** deploy from a _dirty_ tree.

## Steps

1. Run `scripts/preflight.sh <env>` — see the [runbook](https://wiki.meridian.dev/deploy).
2. Tag and push:

```bash
# tag the release
git tag "deploy/$ENV/$(date +%Y%m%d-%H%M)" && git push --tags
```

> Production asks for confirmation first.

```toml
[env]  # unregistered → plain
name = "staging"
```
---
name: deploy
description: Ship a service through the Meridian release train
allowed-tools: Bash(git:*), Bash(scripts/*), Read
version: 2
---
# Deploy

Ship the current branch to a named environment. **Never** deploy from a _dirty_ tree.

## Steps

1. Run `scripts/preflight.sh <env>` — see the [runbook](https://wiki.meridian.dev/deploy).
2. Tag and push:

```bash
# tag the release
git tag "deploy/$ENV/$(date +%Y%m%d-%H%M)" && git push --tags
```

> Production asks for confirmation first.

```toml
[env]  # unregistered → plain
name = "staging"
```
preflight.sh · lang=bash
#!/usr/bin/env bash
# preflight: clean tree, green CI, free lock
set -euo pipefail
ENV="${1:-staging}"
if [ -n "$(git status --porcelain)" ]; then
  echo "dirty tree — refusing to deploy $ENV" >&2
  exit 1
fi
{
  "skill": "deploy",
  "installs": 24,
  "canonical": true,
  "drift": null,
  "harnesses": ["claude-cli", "cursor"]
}
[deploy]
env = "staging"   # toml isn't registered — this stays plain
note = "<script>alert(1)</script> & friends"
long lines · lang=yaml
name: deploy
description: Ship a service through the Meridian release train — preflight, tag, watch the pipeline until the smoke stage passes, then paste the run URL back
allowed-tools: Bash(git:*), Bash(scripts/*), Bash(kubectl rollout undo:*), Read, Write, Edit, Glob, Grep, WebFetch(domain:wiki.meridian.dev)
disable-model-invocation: false
retries: 3
name: deploy
description: Ship a service through the Meridian release train — preflight, tag, watch the pipeline until the smoke stage passes, then paste the run URL back
allowed-tools: Bash(git:*), Bash(scripts/*), Bash(kubectl rollout undo:*), Read, Write, Edit, Glob, Grep, WebFetch(domain:wiki.meridian.dev)
disable-model-invocation: false
retries: 3
components/ux/CodeBlock.vue

Usage

<UxCodeBlock code = "—" label = "—" :collapsible = "false" :defaultOpen = "false" theme = "dark" :lineNumbers = "false" lang = "—" />

Props

PropTypeDefaultDescription
codeString—The code to display and copy (required)
labelString''Header label; header renders only when set or collapsible
collapsibleBooleanfalseHeader toggles the block open/closed
defaultOpenBooleanfalseInitial open state when collapsible
themeString'dark'dark (grey-900) or light (grey-50)
lineNumbersBooleanfalseA line-number gutter (not selectable, not copied) that stays put while long lines scroll — editor source views (design c92 todos plan 12)
langString''Syntax highlighting (highlight.js core, token-mapped colours): markdown/md (a leading --- frontmatter as YAML; fenced blocks in their info-string language, plain when unregistered), yaml/yml, bash/sh/shell/zsh, json. Unset → the plain render, unchanged; unknown → escaped plain text. Copy still copies the raw code (design c92 todos plan 12 follow-up)

Related

Qpoint Brand Style Guide