CodeBlock | Monoline Docs

Skip to content

On this page

const ready = true

import CodeBlock from "@chitrank2050/monoline-docs/components/CodeBlock.astro";

<CodeBlock code="const ready = true" language="js" />

Usage

The copy action copies raw source. Overflow is keyboard-scrollable. Without JavaScript the source remains readable and the copy control stays hidden.

Filename and highlighted line

example.js

const ready = true
console.log(ready)

import CodeBlock from "@chitrank2050/monoline-docs/components/CodeBlock.astro";

<CodeBlock
  code={"const ready = true\nconsole.log(ready)"}
  language="js"
  filename="example.js"
  highlights={[2]}
/>

View code

import CodeBlock from "@chitrank2050/monoline-docs/components/CodeBlock.astro";

<CodeBlock
  code={"const ready = true\nconsole.log(ready)"}
  language="js"
  filename="example.js"
  highlights={[2]}
/>

API reference

CodeBlock props
Name	Type	Default	Description
`code`	`string`	`Required`	Raw source text.
`language`	`string`	`—`	Syntax language; unknown languages remain readable.
`filename`	`string`	`—`	Optional filename header.
`highlights`	`number[]`	`[]`	One-based existing line numbers.

Behavior and accessibility

The copy control copies source without line numbers. Code can be selected manually without JavaScript; long lines remain horizontally scrollable.

Using componentsLearn how to compose documentation with authoring components.Writing pagesLearn how to use components in Markdown and MDX.