Code block · Components · AntelopeJS DMS

CodeBlock shows read-only code in the code editor's look: a head with the title, the language and a copy button, then the code highlighted. Long lines scroll sideways unless wrap is on, and maxLines caps the height. The code is written in the options, or read from a route that answers { code, language? } — a generated snippet, a stored configuration, a request body.

Screenshot of the Code block — Code`CodeBlock`

Usage

src/pages/media.ts

import { CodeBlock } from "@antelopejs/interface-dms/base/code-block";

static preset = CodeBlock({
  title: "$media.presets.config",
  language: "json",
  maxLines: 12,
  fetchUrl: "/api/media/presets/{{params.id}}/config",
});

Options

Options of the Code block
Option	Type	Default	Description
`title`Content	`string \| object`	–	Head of the block.
`code`Content	`string`	–	The code, verbatim.
`language`Content	`"json" \| "javascript" \| "typescript" \| "html" \| "sql" \| "shell" \| …`	`"text"`	Highlighting language.
`copy`Features	`boolean`	`true`	A button copies the code.
`wrap`Appearance	`boolean`	–	Wraps long lines.
`maxLines`Layout	`number`	–	Lines shown before the code scrolls.

A route may answer a language under a common alias — js, ts, bash, sh, plain — and the block reads it; an unknown one is shown as plain text. While the first answer loads the block draws placeholder lines; a failure shows an error with a retry, and a 404 the not-found state.

Pitfalls

In a custom component, show code with the DmsCodeSnippet component rather than a <pre> and a copy button of your own.

Next steps

Empty state

A snippet to start with, inside an empty state.

UI toolkit

The same look in your own Vue.