<kbq-code-block> - компонент который показывает переформатированный текстовый контент и подсвечивает синтаксис.

npm install highlight.js@^11

Настройка highlight.js

По умолчанию компонент загружает ядро highlight.js без языков и показывает код простым текстом. Зарегистрируйте языки своих файлов через 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')
        }
    })
];

Языки загружаются лениво при первом использовании компонента. Простой текст регистрировать не нужно: на него компонент переключается, если язык файла не указан или не зарегистрирован. Обратите внимание: язык html является псевдонимом xml в highlight.js, поэтому для подсветки HTML-кода регистрируйте язык xml.

Чтобы подсвечивать любой язык, загрузите полную сборку со всеми языками (~1 МБ):

providers: [
    kbqCodeBlockHighlightJsConfigProvider({
        core: () => import('highlight.js')
    })
];

Нумерация строк

Пронумеровать строки полезно, чтобы дать ссылку на конкретное место в документе. Нумерация строк отключена по умолчанию, включается при помощи атрибута lineNumbers.

function getVulnerabilities() {
	return ['BruteForce', 'Complex Attack', 'DDoS', 'HIPS alert', 'IDS/IPS Alert', 'Zero-Day Exploit', 'XSS', 'Malware', 'Ransomware', 'Phishing'];
};

Шапка с заголовком

В шапке можно написать название документа или обозначить синтаксис. При прокрутке в шапке появляется тень.

{
  "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"
      }
    }
  ]
}

Изменение высоты блока

Блок может растягиваться и занимать доступную область экрана, если изучение кода — это одна из главных задач в интерфейсе. Когда место на экране ограничено, или код только дополняет основную информацию, разработчик может использовать блок с фиксированной высотой, настраивается при помощи атрибута maxHeight.

Для компактности бывает полезно показать часть документа с возможностью развернуть все, при помощи атрибута viewAll. Блок увеличится по высоте и весь код будет виден — так удастся избавиться от двойной прокрутки. В свернутом виде нет прокрутки, недоступна функция смена режима переноса. Если сменить режим переноса строк, а потом свернуть-развернуть код, то настройка сохранится.

<?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>

Мягкий перенос строк

По умолчанию строки не переносятся. Режим переноса в блоке можно настроить заранее, при помощи атрибута softWrap, а также дать пользователю возможность управлять этим с помощью кнопки-переключателя в панели действий, включается при помощи атрибута canToggleSoftWrap.

Иконка в кнопке означает будущее состояние после активации, иконка меняется после смены режима переноса.

[
	{
		"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."
	}
]

Показ нескольких документов

Несколько документов размещаются в блоке во вкладках. Заголовок вкладки формируется из поля filename. При необходимости вкладки можно скрыть, при помощи атрибута hideTabs, а установить активный таб при помощи атрибута activeFileIndex.

Вкладки скрываются автоматически, для одного документа с пустым 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));

Блок заголовков вкладок отображается без тени по умолчанию. Если содержимое выходит за пределы области, то при скроллинге содержимого блока кода появляется тень под блоком заголовков вкладок.

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;
}

Визуальное оформление

Предусмотрено два стиля оформление блока: с рамкой или с контрастной к фону страницы подложкой. Контрастный фон не дает блоку потеряться на экране с разномастным содержимым, настраивается при помощи атрибута filled.

npm install @koobiq/components

Без рамок

Когда блок кода должен занять весь контейнер или экран, то лучше использовать оформление без рамки и фона, настраивается при помощи атрибута noBorder.

Панель действий

Панель действий расположена в правом верхнем углу блока и остается на месте при прокрутке. Конфигурация компонента определяет, какие действия будут доступны.

При видимых вкладках, а также на устройствах iOS и Android панель отображается постоянно. Если вкладки скрыты, на остальных устройствах панель появляется при наведении на блок.

Атрибут alwaysShowActionbar позволяет отображать панель постоянно независимо от наличия вкладок и наведения. По умолчанию он выключен.

<kbq-code-block [files]="files" canCopy alwaysShowActionbar />

Чтобы включить настройку для всех блоков кода, зарегистрируйте провайдер:

providers: [kbqCodeBlockDefaultOptionsProvider({ alwaysShowActionbar: true })];

Изменение режима переноса

Пользователь может изменять режим переноса при помощи кнопки-переключателя, по умолчанию эта возможность выключена, настраивается при помощи атрибута canToggleSoftWrap.

<kbq-code-block [files]="files" canToggleSoftWrap />

Скачивание документа

Пользователь может сохранить/скачать документ в файл, по умолчанию эта возможность выключена, настраивается при помощи атрибута canDownload.

Имя и расширение файла берется из поля filename. Имя файла по умолчанию — code, расширение - txt.

<kbq-code-block [files]="files" canDownload />

Копирование текста документа

Пользователь может скопировать текст документа, по умолчанию эта опция включена, настраивается при помощи атрибута canCopy.

<kbq-code-block [files]="files" canCopy="false" />

Открыть документ во внешней системе

Адрес берется из поля link. Ссылка открывается в новой вкладке.

<?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>