Visual primitive

Code block

<DomCodeBlock>

A syntax-highlighted code block for examples, API snippets, and generated source previews.

Usage

Package-ready syntax highlighting

Use DomCodeBlock in any DOM Studio app or package consumer that imports the Vue surface and stylesheet.

import { DomButton } from '@getdom/studio/vue';

export function SaveAction() {
	return {
		label: 'Save changes',
		component: DomButton,
	};
}

CodeSnippet.vuevue

<script setup>
import { DomCodeBlock } from '../../../lib/vue';

const source = `import { DomButton } from '@getdom/studio/vue';

export function SaveAction() {
\treturn {
\t\tlabel: 'Save changes',
\t\tcomponent: DomButton,
\t};
}`;
</script>

<template>
	<div class="w-full min-w-0 max-w-2xl">
		<DomCodeBlock
			:code="source"
			filename="save-action.js"
			lang="js"
		/>
	</div>
</template>

Sizing

Clamp long snippets

Set previewLines when a code block should stay compact inside a card, table detail, drawer, or changelog entry.

{
	"component": "DomCodeBlock",
	"props": {
		"lang": "json",
		"previewLines": 5,
		"framed": true
	}
}

CompactSnippet.vuevue

<script setup>
import { DomCodeBlock } from '../../../lib/vue';

const jsonSource = `{
\t"component": "DomCodeBlock",
\t"props": {
\t\t"lang": "json",
\t\t"previewLines": 5,
\t\t"framed": true
\t}
}`;
</script>

<template>
	<div class="w-full min-w-0 max-w-2xl">
		<DomCodeBlock
			:code="jsonSource"
			lang="json"
			:preview-lines="5"
		/>
	</div>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`lang`	'vue' \| 'html' \| 'js' \| 'ts' \| 'css' \| 'json' \| 'md' \| 'txt'	string	'vue'	Language passed to the syntax highlighter.
`code`	string	string	''	Code to render. If empty, default slot content is serialized.
`filename`	string	string	''	Optional source filename for labels and wrappers.
`previewLines`	number	number	0	Maximum visible lines before the block scrolls. Use 0 for no cap.
`framed`	boolean	boolean	true	Render the standard border, radius, and canvas background.

Auto-generated from Code block.props and inline _edit hints.