Default

Flat

Theme

Copy

Code

LineNumbers

Highlight

Overflow

LineWrap

Default

function getTime(): number { return new Date().getTime(); }

Edit Example

A container for content representing programming languages.

Flat

function getTime(): number { return new Date().getTime(); }

Edit Example

Codeblock with flat container styling for minimal visual emphasis.

Theme

function getTime(): number { return new Date().getTime(); }

Edit Example

Light and dark theme variations for different UI contexts.

Copy

function getTime(): number { return new Date().getTime(); }

Edit Example

Codeblock with copy button action for easy code sharing and reuse.

Code

Edit Example

Text code to be process into a codeblock.

Code

Description

string

default

Line Numbers

function getTime(): number { return new Date().getTime(); }

Edit Example

Adds styling to show the line numbers of the codeblock.

LineNumbers

Description

boolean

default

Highlight

function getTime(): number { return new Date().getTime(); }

Edit Example

Adds styling to highlight the provided code lines.For many lines: use Comma seperated values, ex: (1,5,7).For range of lines, use hyphen seperated values, ex: (1-5).You can combine both such as: ex: (1,5,10-15,20).

Highlight

Description

string

default

Overflow

test-case

import{LitElement as t,html as e}from"lit";import{property as s}from"lit/decorators/property.js";import{state as o}from"lit/decorators/state.js"; import{unsafeHTML as i}from"lit/directives/unsafe-html.js"; import{useStyles as r,shiftLeft as n}from"@nvidia-elements/core/internal"; import l from"./codeblock.css.js"; import a from"highlight.js/lib/core"; import h from"highlight.js/lib/languages/shell";

Edit Example

Codeblock with constrained height for scrollable overflow behavior with long code.

Line Wrap

test-case

Edit Example

Comparison of line wrapping vs horizontal scrolling for long code lines in constrained widths.