feat(code-block): added highlight.js language provider (#DS-3178) by artembelik · Pull Request #1593 · koobiq/angular-components

artembelik · 2026-05-21T15:38:00Z

No description provided.

Copilot

Pull request overview

This PR introduces an injectable highlight.js configuration for the code-block component so consumers can lazy-load the Highlight.js core and register only the languages they need (reducing bundle size), and updates docs/examples/tests accordingly.

Changes:

Added KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG, KbqCodeBlockHighlightJsConfig, and kbqCodeBlockHighlightJsConfigProvider to support async Highlight.js core/language loading.
Updated docs-examples and component docs (EN/RU) to demonstrate configuring Highlight.js with lazy-loaded core + languages.
Updated KbqCodeBlock tests to wait for async highlighting, and added tests for the async-loading path.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tools/public_api_guard/components/code-block.api.md	Public API report updated for new Highlight.js config token/type/provider exports.
packages/components/code-block/code-block-highlight.ts	Switched from eager Highlight.js import to async loader + DI-driven configuration and language registration.
packages/components/code-block/code-block.spec.ts	Adjusted existing tests for async highlighting and added new async-core tests.
packages/components/code-block/code-block.en.md	Documented Highlight.js configuration for smaller bundles.
packages/components/code-block/code-block.ru.md	Documented Highlight.js configuration for smaller bundles (RU).
packages/docs-examples/components/code-block/code-block-overview/code-block-overview-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-header-pinned/code-block-header-pinned-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-with-custom-locale-configuration/code-block-with-custom-locale-configuration-example.ts	Added Highlight.js config provider usage alongside locale override example.
packages/docs-examples/components/code-block/code-block-with-filled/code-block-with-filled-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-with-link/code-block-with-link-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-with-max-height/code-block-with-max-height-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-with-no-border/code-block-with-no-border-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-with-soft-wrap/code-block-with-soft-wrap-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-with-tabs/code-block-with-tabs-example.ts	Added Highlight.js config provider usage in docs example.
packages/docs-examples/components/code-block/code-block-with-tabs-and-shadow/code-block-with-tabs-and-shadow-example.ts	Added Highlight.js config provider usage in docs example.
packages/components-dev/code-block/module.ts	Updated dev module wiring to import standalone examples directly (and removed app-level locale provider).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

github-actions · 2026-05-21T15:41:54Z

Visit the preview URL for this PR (updated for commit 4da1efe):

https://koobiq-next--prs-1593-t7efbyco.web.app

_{(expires Wed, 27 May 2026 11:48:58 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c}

github-actions · 2026-05-21T15:43:11Z