Code

Headless code typography primitive for consumer-owned inline and block code styling.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Code } from "@vizejs/ui/code";

Or copy the source into your project with vize lib pull code (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Inline code within prose next to a preformatted block of shell commands. -->
<script setup lang="ts">
import { Code } from "@vizejs/ui/code";
</script>

<template>
  <div>
    <p>
      Install the package, then import <Code>Button</Code> from
      <Code tone="accent">@vizejs/ui</Code>.
    </p>
    <pre><Code variant="block" size="sm">npm install @vizejs/ui
npx vize lint src</Code></pre>
  </div>
</template>

API

Code

Source: src/families/typography/code/code.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for code.vue (@vizejs/ui/code). Every row is proven by the named mounted-DOM or SSR test. A row without a passing test is a contract violation.

Props

Slots

Expose

Data Attributes

ARIA Attributes

Code never sets role, tabindex, aria-hidden, aria-live, aria-label, or aria-labelledby by default. Native <code> remains exposed as code content. Consumers that need a labelled region, term, focusable command example, or hidden decorative code pass ordinary Vue fallthrough attributes themselves.

CSS Custom Properties

Code defines no CSS custom properties and ships no stylesheet. Consumers own monospace font selection, syntax color, wrapping, white-space, indentation, block layout, and inline rhythm through ordinary CSS.

Parts