import { KbqCodeBlockModule } from '@koobiq/components/code-block';Directive which applies syntax highlighting to the code block content.
Selector: code[kbqCodeBlockHighlight]
| Name | Description |
|---|---|
@Input() file: KbqCodeBlockFile
|
The code file. |
@Input() singleLine: boolean
|
Whether to display line numbers for single line code block. |
@Input() startFrom: number
|
The starting line number. |
Marks a template as a custom tab link.
Selector: ng-template[kbqCodeBlockTabLinkContent]
Exported as: kbqCodeBlockTabLinkContentComponent which highlights blocks of code.
Selector: kbq-code-block
Exported as: kbqCodeBlock| Name | Description |
|---|---|
@Input() activeFileIndex: number
|
Defines which file (index) is active. |
@Input() canCopy: boolean
|
Added copy code button. |
@Input() canDownload: boolean
|
Added download code button. |
@Input() canToggleSoftWrap: boolean
|
Added soft wrap toggle button. |
@Input() files: KbqCodeBlockFile[]
|
|
@Input() filled: boolean
|
Whether the code block should be filled. |
@Input() hideTabs: boolean
|
Whether to hide header tabs. Always `true` if there is only one file without filename. Makes actionbar floating if tabs are hidden. |
@Input() lineNumbers: boolean
|
Whether to display line numbers. |
@Input() maxHeight: number
|
Maximum height of the code block content, other parts will be hidden. Can be toggled by `viewAll` property. |
@Input() noBorder: boolean
|
Whether to hide border. |
@Input() softWrap: boolean
|
Whether sequences of whitespace should be preserved. |
@Input() viewAll: boolean
|
Allows to view all the code, otherwise it will be hidden. Works only with `maxHeight` property. |
@Output('activeFileIndexChange')
activeFileIndexChange: EventEmitter |
Output to support two-way binding on `[(activeFileIndex)]` property. |
@Output('hideTabsChange')
hideTabsChange: EventEmitter |
Output to support two-way binding on `[(hideTabs)]` property. |
@Output('softWrapChange')
softWrapChange: EventEmitter |
Output to support two-way binding on `[(softWrap)]` property. |
@Output('viewAllChange')
viewAllChange: EventEmitter |
Output to support two-way binding on `[(viewAll)]` property. |
| scrollableCodeContent: CdkScrollable | Reference to the scrollable code content. |
@Input() Deprecated codeFiles: KbqCodeBlockFile[]
|
Context provided to the tab link template.
type KbqTabLinkTemplateContext = { $implicit: KbqCodeBlockFile; fallbackFileName: string };
Code block file object.
type KbqCodeBlockFile = {
/**
* Code content.
*/
content: string;
/**
* File name, which will be displayed in UI and when downloading.
* If not provided, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`.
*/
filename?: string;
/**
* File language, requires for correct syntax highlighting.
* If not provided or invalid, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`.
*
* List of supported languages:
* @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
*/
language?: string;
/**
* Link to the file, which will be opened in a new window.
* Adds `openExternalSystem` button.
*/
link?: string;
};
type KbqCodeFile = KbqCodeBlockFile;
Fallback language for code block if language is not supported/specified. List of supported languages:
const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`.
const kbqCodeBlockFallbackFileLanguageProvider: (language: string) => Provider;
Localization configuration provider.
const KBQ_CODE_BLOCK_LOCALE_CONFIGURATION: InjectionToken<KbqCodeBlockLocaleConfiguration>;
Utility provider for `KBQ_CODE_BLOCK_LOCALE_CONFIGURATION`.
const kbqCodeBlockLocaleConfigurationProvider: (configuration: KbqCodeBlockLocaleConfiguration) => Provider;
Fallback file name for code block if file name is not specified.
const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME: InjectionToken<string>;
Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`.
const kbqCodeBlockFallbackFileNameProvider: (fileName: string) => Provider;