Code Documentation for design-system
  1. Components
  2. CodeBlockComponent

File

code-block/src/lib/code-block.component.ts

Description

Component representing a code block. Displays code with syntax highlighting.

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector hra-code-block
imports CommonModule HighlightModule ScrollingModule
templateUrl ./code-block.component.html
styleUrl ./code-block.component.scss

Index

Inputs

Inputs

code
Type : string
Required :  true
Defined in code-block/src/lib/code-block.component.ts:19

Code for the code block
language
Type : string
Required :  true
Defined in code-block/src/lib/code-block.component.ts:21

Language for the code block

 
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { HighlightModule } from 'ngx-highlightjs';
import { ScrollingModule } from '@hra-ui/design-system/scrolling';

/**
 * Component representing a code block.
 * Displays code with syntax highlighting.
 */
@Component({
  selector: 'hra-code-block',
  imports: [CommonModule, HighlightModule, ScrollingModule],
  templateUrl: './code-block.component.html',
  styleUrl: './code-block.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CodeBlockComponent {
  /** Code for the code block */
  readonly code = input.required<string>();
  /** Language for the code block */
  readonly language = input.required<string>();
}

<ng-scrollbar>
  <pre class="code-block-pre">
    <code [highlight]="code()" [language]="language()"></code>
  </pre>
</ng-scrollbar>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""