Code Block | getdom.studio

Playground

Try each language and layout prop

Code block playground

Edit the source, switch syntax languages, clamp the preview, or remove the standard frame. Language grammars load only when selected.

js

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

const source = '<DomButton>Save</DomButton>';

Playground.vuevue

vue

<script setup>
import { reactive } from 'vue';
import { DomCodeBlock } from '@getdom/studio/vue';

const data = reactive({
	  "lang": "js",
	  "code": "import { DomCodeBlock } from '@getdom/studio/vue';\n\nconst source = '<DomButton>Save</DomButton>';",
	  "filename": "",
	  "previewLines": 0,
	  "framed": true,
	  "themeMode": "inherit"
	});
</script>

<template>
	<DomCodeBlock
		v-bind="data"
	/>
</template>

Usage

Package-ready syntax highlighting

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

python

from dataclasses import dataclass

@dataclass
class Deployment:
	service: str
	replicas: int

deployment = Deployment(service="api", replicas=3)

CodeSnippet.vuevue

vue

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

const source = `from dataclasses import dataclass

@dataclass
class Deployment:
\tservice: str
\treplicas: int

deployment = Deployment(service="api", replicas=3)`;
</script>

<template>
	<div class="w-full min-w-0 max-w-2xl">
		<DomCodeBlock
			:code="source"
			filename="deployment.py"
			lang="python"
		/>
	</div>
</template>

Sizing

Clamp long snippets

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

bash

#!/usr/bin/env bash
set -euo pipefail

npm run build
npm run preview

CompactSnippet.vuevue

vue

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

const shellSource = `#!/usr/bin/env bash
set -euo pipefail

npm run build
npm run preview`;
</script>

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

Reference

Props

Control props

Name	Type	TS	Default	Description
`lang`	'vue' \| 'html' \| 'js' \| 'ts' \| 'css' \| 'json' \| 'md' \| 'python' \| 'bash' \| 'sh' \| 'sql' \| '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.
`themeMode`	'inherit' \| 'light' \| 'dark'	string	'inherit'	Force a light or dark code theme, or inherit the surrounding application theme.

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