<kbq-code-block> is a component that displays reformatted text content with syntax highlighting.
For the component to work, the highlight.js@^11 dependency is required:
npm install highlight.js@^11By default, the component loads the highlight.js core, which has no languages, and shows the code as plain text. Register the languages of your files with kbqCodeBlockHighlightJsConfigProvider:
providers: [ kbqCodeBlockHighlightJsConfigProvider({ languages: { typescript: () => import('highlight.js/lib/languages/typescript'), css: () => import('highlight.js/lib/languages/css'), html: () => import('highlight.js/lib/languages/xml') } }) ];
Languages are loaded lazily on first use. Plain text needs no entry: the component falls back to it for a file whose language is not specified or not registered. Note that the html language is an alias of xml in highlight.js, so register xml to enable HTML syntax highlighting.
To highlight any language, load the full bundle with all of them (~1 MB):
providers: [ kbqCodeBlockHighlightJsConfigProvider({ core: () => import('highlight.js') }) ];
Numbering lines is useful for referencing a specific location in the document. Line numbers are disabled by default and can be enabled using the lineNumbers attribute.
In the header, you can specify the document name or define the syntax. A shadow appears in the header when scrolling.
{ "data": [{ "id": "1", "attributes": { "title": "JSON:API paints my hyper-super-duper mighty bikeshed!", "body": "The shortest article. Ever." }, "relationships": { "author": { "data": {"id": "42", "type": "people"} } } }], "included": [ { "type": "people", "id": "42", "attributes": { "name": "John" } } ] }
{ "data": [{ "id": "1", "attributes": { "title": "JSON:API paints my hyper-super-duper mighty bikeshed!", "body": "The shortest article. Ever." }, "relationships": { "author": { "data": {"id": "42", "type": "people"} } } }], "included": [ { "type": "people", "id": "42", "attributes": { "name": "John" } } ] }
The block can expand to fill the available screen area if reviewing the code is one of the main tasks in the interface. When screen space is limited or the code only supplements the main content, a developer can use a block with a fixed height, configured using the maxHeight attribute.
For compactness, it can be useful to show a portion of the document with the option to expand everything, using the viewAll attribute. The block will increase in height and all the code will be visible, avoiding double scrolling. In the collapsed state, there is no scrolling and the line wrap toggle is unavailable. If you change the wrap mode and then collapse and expand the code, the setting is preserved.
<?xml version="1.0" encoding="UTF-8" ?> <vulnerabilities> <vulnerability> <name>Cross-site scripting</name> <abbreviation>XSS</abbreviation> <description>Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy. During the second half of 2007, XSSed documented 11,253 site-specific cross-site vulnerabilities, compared to 2,134 "traditional" vulnerabilities documented by Symantec. XSS effects vary in range from petty nuisance to significant security risk, depending on the sensitivity of the data handled by the vulnerable site and the nature of any security mitigation implemented by the site's owner network.</description> </vulnerability> <vulnerability> <name>Denial-of-service attack</name> <abbreviation>DoS</abbreviation> <description>In computing, a denial-of-service attack (DoS attack) is a cyber-attack in which the perpetrator seeks to make a machine or network resource unavailable to its intended users by temporarily or indefinitely disrupting services of a host connected to a network. Denial of service is typically accomplished by flooding the targeted machine or resource with superfluous requests in an attempt to overload systems and prevent some or all legitimate requests from being fulfilled. The range of attacks varies widely, spanning from inundating a server with millions of requests to slow its performance, overwhelming a server with a substantial amount of invalid data, to submitting requests with an illegitimate IP address.</description> </vulnerability> <vulnerabilities>
By default, lines do not wrap. The wrap mode can be configured in advance using the softWrap attribute, and the user can also be given the ability to control this with a toggle button in the action panel, enabled using the canToggleSoftWrap attribute.
The icon in the button represents the future state after activation; the icon changes after the wrap mode is toggled.
[ { "name": "Cross-site scripting", "abbreviation": "XSS", "description": "Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy. During the second half of 2007, XSSed documented 11,253 site-specific cross-site vulnerabilities, compared to 2,134 "traditional" vulnerabilities documented by Symantec. XSS effects vary in range from petty nuisance to significant security risk, depending on the sensitivity of the data handled by the vulnerable site and the nature of any security mitigation implemented by the site's owner network." } ]
Multiple documents are placed in the block within tabs. The tab title is formed from the filename field. If needed, tabs can be hidden using the hideTabs attribute, and the active tab can be set using the activeFileIndex attribute.
Tabs are hidden automatically for a single document with an empty filename.
import { ChangeDetectionStrategy, Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { KbqLink } from '@koobiq/components/link'; @Component({ imports: [KbqLink], selector: 'app-root', template: `<a kbqLink target="_blank" href="https://koobiq.io/">Koobiq</a>`, changeDetection: ChangeDetectionStrategy.OnPush }) export class App {} bootstrapApplication(App).catch((error) => console.error(error));
The tab header block is displayed without a shadow by default. If content extends beyond the area, a shadow appears under the tab header block when the code block content is scrolled.
body { margin: 0; font-family: var(--kbq-typography-text-normal-font-family); font-size: var(--kbq-typography-text-normal-font-size); font-weight: var(--kbq-typography-text-normal-font-weight); line-height: var(--kbq-typography-text-normal-line-height); text-transform: var(--kbq-typography-text-normal-text-transform); font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings); letter-spacing: var(--kbq-typography-text-normal-letter-spacing); background: var(--kbq-background-bg); color: var(--kbq-foreground-contrast); } a { color: var(--kbq-link-text); text-decoration: none; }
Two visual styles are available for the block: with a border or with a background contrasting to the page background. The contrasting background prevents the block from getting lost on a screen with varied content, and is configured using the filled attribute.
When the code block should fill an entire container or screen, it is best to use a style without a border and background, configured using the noBorder attribute.
The action panel is located in the upper-right corner of the block and remains fixed while scrolling. The component configuration determines which actions are available.
The panel is always visible when tabs are shown, as well as on iOS and Android devices. When tabs are hidden, it appears on hover on other devices.
The alwaysShowActionbar attribute keeps the panel visible regardless of tabs or hover. It is disabled by default.
<kbq-code-block [files]="files" canCopy alwaysShowActionbar />To enable the option for all code blocks within an injector scope, use the provider:
providers: [kbqCodeBlockDefaultOptionsProvider({ alwaysShowActionbar: true })];The user can toggle the wrap mode using a toggle button; this option is disabled by default and can be configured using the canToggleSoftWrap attribute.
<kbq-code-block [files]="files" canToggleSoftWrap />The user can save/download the document to a file; this option is disabled by default and can be configured using the canDownload attribute.
The file name and extension are taken from the filename field. The default file name is code, and the default extension is txt.
<kbq-code-block [files]="files" canDownload />The user can copy the document text; this option is enabled by default and can be configured using the canCopy attribute.
<kbq-code-block [files]="files" canCopy="false" />The address is taken from the link field. The link opens in a new tab.
<?xml version="1.0" encoding="UTF-8" ?> <vulnerabilities> <vulnerability> <name>Cross-site scripting</name> <abbreviation>XSS</abbreviation> <description>Cross-site scripting (XSS) is a type of security vulnerability that can be found in some web applications. XSS attacks enable attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy. During the second half of 2007, XSSed documented 11,253 site-specific cross-site vulnerabilities, compared to 2,134 "traditional" vulnerabilities documented by Symantec. XSS effects vary in range from petty nuisance to significant security risk, depending on the sensitivity of the data handled by the vulnerable site and the nature of any security mitigation implemented by the site's owner network.</description> </vulnerability> <vulnerabilities>