Code Block

Name: ngx-prompt-kit
Author: PianoNic

A bordered code container with syntax highlighting via Shiki. Lazy-loads the highlighter only in the browser.

Examples

With header

A CodeBlockGroup gives the block a filename row and language tag.

greeter.tstypescript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('world'));

<pk-code-block class="max-w-2xl">
  <pk-code-block-group class="border-b border-border px-4 py-2 text-xs">
    <span class="font-mono">greeter.ts</span>
    <span class="uppercase tracking-wider">typescript</span>
  </pk-code-block-group>
  <pk-code-block-code [code]="codeString" language="ts" />
</pk-code-block>

Bare snippet

No header, just the highlighted code.

ng add ngx-prompt-kit
ng generate ngx-prompt-kit:message

<pk-code-block class="max-w-2xl">
  <pk-code-block-code [code]="codeString" language="bash" />
</pk-code-block>

Installation

Add the code-block component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:code-block

Component API

PkCodeBlock

Prop	Type	Default	Description
class	`string`	—	Extra classes for the bordered container.

PkCodeBlockGroup

Prop	Type	Default	Description
class	`string`	—	Extra classes for the header row.

PkCodeBlockCode

Prop	Type	Default	Description
code	`string`	''	The source to highlight.
language	`string`	'tsx'	Shiki language identifier.
theme	`string`	'github-light'	Shiki theme name.
class	`string`	—	Extra classes for the code container.