Code snippet

The collapsible “View Code” block used throughout these docs. It supports a togglable reveal, multiple language tabs, one-click copy, and pulling markup straight from the live demo it documents. Styles ship in framework/css/components/code-snippet.css and behavior in framework/js/components/code-snippet.js.

Collapsible (single language)

Click “View Code” to expand the block.

<div class="vd-code-snippet" data-collapsible>
  <button class="vd-code-snippet-toggle" aria-expanded="false">
    <span class="vd-code-snippet-toggle-icon"></span>
    <span>View Code</span>
  </button>
  <div class="vd-code-snippet-content">
    <div class="vd-code-snippet-body">
      <pre class="vd-code-snippet-pane is-active" data-lang="html"><code>...</code></pre>
    </div>
  </div>
</div>

Multiple language tabs

Provide more than one language to get HTML / CSS / JavaScript tabs.

<div class="vd-code-snippet" data-collapsible>
  <button class="vd-code-snippet-toggle" aria-expanded="false">
    <span class="vd-code-snippet-toggle-icon"></span>
    <span>View Code</span>
  </button>
  <div class="vd-code-snippet-content">
    <div class="vd-code-snippet-body">
      <pre class="vd-code-snippet-pane is-active" data-lang="html"><code>...</code></pre>
    </div>
  </div>
</div>

.my-element {
  color: var(--vd-color-primary);
  border-radius: var(--vd-radius-fib-5);
}

import { VdCodeSnippet } from "@vanduo-oss/vd3";

const code = "const x = 1;";
// Render a highlighted, copyable block — no init call needed:
// <VdCodeSnippet :code="code" language="javascript" />

Expanded by default

Add data-expanded="true" to render the snippet open on load.

import { VdCodeSnippet } from "@vanduo-oss/vd3";

const code = "const x = 1;";
// Render a highlighted, copyable block — no init call needed:
// <VdCodeSnippet :code="code" language="javascript" />

API Reference

Usage

<script setup lang="ts">
import { VdCodeSnippet } from "@vanduo-oss/vd3";
const code = "const x = 1;";
</script>

<template>
  <VdCodeSnippet :code="code" language="javascript" />
</template>

CSS Classes

Class	Description
`.vd-code-snippet`	Root wrapper. Add data-collapsible to make it a togglable View Code block.
`.vd-code-snippet-toggle`	The “View Code” button that expands/collapses the content.
`.vd-code-snippet-toggle-icon`	Chevron indicator inside the toggle, rotated by state.
`.vd-code-snippet-content`	The collapsible region holding the header and body.
`.vd-code-snippet-header`	Row holding the language tabs and the copy button.
`.vd-code-snippet-tabs`	Tablist wrapping one .vd-code-snippet-tab per language.
`.vd-code-snippet-tab`	A language tab. Add is-active to mark the visible pane.
`.vd-code-snippet-copy`	Copy-to-clipboard button for the active pane.
`.vd-code-snippet-body`	Container for the code panes.
`.vd-code-snippet-pane`	One <pre> per language (data-lang). is-active shows it.
`.vd-code-snippet-single`	Modifier for a snippet with no language tabs.
`.vd-code-snippet-inline`	Inline, non-collapsible code presentation.
`.vd-code-snippet-line-numbers`	Adds a gutter with line numbers.

Component API (Vue 3)

Prop	Description
`:code`	The code string to display.
`:language`	Highlight language (default "html").
`:copyable`	Show a copy button (default true).

Data Attributes

Attribute	Description
`data-collapsible`	Makes the snippet a collapsible View Code block.
`data-expanded`	Set to "true" to render the snippet expanded on load.
`data-lang`	Language key on each tab and pane (e.g. html, css, javascript).
`data-extract`	Selector on a pane — pulls its HTML from the live demo it documents.

Runtime notes

Surface	Description
`<VdCodeSnippet>`	Self-contained Vue 3 component — highlights and (optionally) copies code. No init call or global runtime is required.
`.vd-code-snippet markup`	The collapsible “View Code” block is plain markup plus your own toggle logic (this site's DocCodeSnippet wraps it in Vue); vd3 ships no auto-init for it.