CodeBlock
CodeBlock
The XMarkCodeBlock component renders a code sample using Shiki for syntax highlighting. It is SSR-safe — the highlighter runs only on the client behind a ClientOnly boundary, with a <pre> fallback that keeps the page readable until Shiki mounts. An optional copy button copies the raw code to the clipboard with a 2-second "copied" confirmation state.
Components
<XMarkCodeBlock />
Basic usage:
<XMarkCodeBlock
:code="`const greeting = 'Hello, world!'\nconsole.log(greeting)`"
language="javascript"
/>
With copy button:
<XMarkCodeBlock
:code="snippet"
language="vue"
:show-copy="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
code | string | — (required) | The raw code string to highlight. |
language | string | '' | Language identifier passed to Shiki (e.g. 'javascript', 'vue', 'bash', 'html', 'css', 'json', 'yaml', 'sql', 'markdown', 'typescript'). When empty, no language label / code-theme padding is shown. |
showCopy | boolean | false | Show the copy-to-clipboard button in the top-right corner. |
AI Context
category: UI Elements
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkCodeBlock
use-when: >
Rendering a single code snippet on a marketing / docs / blog page with
syntax highlighting and a copy-to-clipboard action. For inline paragraphs
of mixed prose + code prefer inline `<code>` tags; for a full docs site
reach for the dedicated docs layer instead.
typical-page-section: Inside a features grid, blog post, pricing FAQ, or technical marketing page.
Section
Configurable section wrapper with background variants (default/subtle/elevated/bold/transparent), padding scales, container sizing, and optional image/pattern backgrounds with parallax support.
PatternBg
Decorative SVG background pattern overlay with 13 built-in patterns (dots, grid, diagonal, topography, circuit, waves, plaid, diagonalPlaid, hexagons, triangles, crosses, zigzag, diamonds) and dark-mode auto-color.