Code Block

Code Block Examples

Tailwind playground examples for adapter modes, copy behavior, line tools, wrapping, and HTML sanitization.

1) Plain Adapter (default)

example.component.ts

ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<h1>Hello TailNG</h1>',
})
export class ExampleComponent {}

No custom adapter selected.

2) Keyword Adapter (custom html)

example.component.ts

ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<h1>Hello TailNG</h1>',
})
export class ExampleComponent {}

Custom adapter wraps keywords with inline classes.

3) Token Adapter + Line Focus

load-user.ts

ts
import { signal } from '@angular/core';

const retries = signal(3);

export async function loadUser(): Promise<string> {
  if (retries() > 0) {
    return await Promise.resolve('ok');
  }

  return 'fallback';
}

Token output + highlighted ranges + dimmed non-highlighted lines.

4) Highlight Off (escaped plain text)

landing.html

html
<main>
  <section class="hero">
    <h1>TailNG Code Block</h1>
    <p>Adapter strategy for syntax highlighting.</p>
  </section>
</main>

Renders escaped plain text even when HTML-like markup exists.

5) Wrapped + Scrollable

commands.sh

bash
pnpm nx run playground-tailwind:serve
pnpm nx run playground-plain-css:serve
pnpm tailng -- add code-block --cwd apps/tailng-ui/playground-registry
pnpm nx run-many -t build -p primitives,components
pnpm nx run-many -t vite:test -p primitives,components --skipNxCache
pnpm nx graph

Large snippet with wrapping and max-height scroll.

6) Copy Override

install-and-run.sh

bash
pnpm nx run playground-tailwind:serve
pnpm nx run playground-plain-css:serve
pnpm tailng -- add code-block --cwd apps/tailng-ui/playground-registry

Displayed code differs from copied payload.

7) Sanitized HTML Adapter Output

sanitize-demo.ts

ts
const message = "sanitize";


safe text stays visible

Script tags and unsafe handlers are stripped by default.