ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangePhone inputSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionChartsAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.18.0

Code snippet

Highlighting comes from highlight.js. Only its core is loaded up front; the grammar for the language you ask for is fetched on demand, so a page with one ts snippet pays for one grammar rather than all 36.

Line numbers

Off by default — a one-line install command gains nothing from a 1 beside it.

Theming

The block follows the page's data-bs-theme with no wiring — flip the theme switch in the topbar and this snippet follows it. Pass [theme]="'light'" or 'dark' to pin it instead.

Per-line annotations

Each line can carry a kind, up to two gutter labels and a description. kind is an opaque string — the component ships no colours for it, so you style ::part(annotation-<kind>) from your own stylesheet and the component stays coverage-agnostic.

Keyboard: Tab reaches the active line, then the arrow keys move between line links and Home / End jump to the first and last. Clicking a line number sets the active line here; the underlying link is a real href, so middle-click still opens it.

Constrained size

Give the component a height or max-height and the listing scrolls vertically inside it; constrain the width and long lines scroll horizontally. Both scrollbars belong to the code area, so the copy button and the line-number gutter stay put while you scroll.