# Markdown

- Entry point: `@koobiq/components/markdown`
- NgModule: `KbqMarkdownModule`
- Page: https://koobiq.io/en/components/markdown/overview

## Overview

`KbqMarkdown` - component that allows converting text written in _Markdown_ markup language into _HTML_.

Note

For the component to work, the [`marked`](https://github.com/markedjs/marked) dependency is required:

```bash
npm install marked
```

### Headers

**Example: Markdown headers** (`markdown-overview`)

```ts markdown-overview-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-overview-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-overview-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownOverviewExample {}
```

```html ./markdown-overview-example.html
<kbq-markdown ngPreserveWhitespaces>
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
</kbq-markdown>
```

### Paragraph

**Example: Markdown paragraph** (`markdown-paragraph`)

```ts markdown-paragraph-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-paragraph-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-paragraph-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownParagraphExample {}
```

```html ./markdown-paragraph-example.html
<kbq-markdown ngPreserveWhitespaces>
A brute-force attack is a cryptanalytic attack that can, in theory, be used to attempt to decrypt any encrypted data (except for data encrypted in an information-theoretically secure manner).

Such an attack might be used when it is not possible to take advantage of other weaknesses in an encryption system (if any exist) that would make the task easier.
</kbq-markdown>
```

### Text emphasis

**Example: Markdown selection** (`markdown-selection`)

```ts markdown-selection-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-selection-example',
    imports: [KbqMarkdown],
    templateUrl: 'markdown-selection-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownSelectionExample {}
```

```html markdown-selection-example.html
<kbq-markdown ngPreserveWhitespaces>
**bold**&#32;&#32;
__bold__

_italic_&#32;&#32;
*italic*

***bold and italic***&#32;&#32;
___bold and italic___
</kbq-markdown>
```

### Blockquote

**Example: Markdown quote** (`markdown-quote`)

```ts markdown-quote-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-quote-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-quote-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownQuoteExample {}
```

```html ./markdown-quote-example.html
<kbq-markdown ngPreserveWhitespaces>
> A [brute-force attack](#) is a cryptanalytic attack that can, in theory, be used to attempt to decrypt any encrypted data (except for data encrypted in an information-theoretically secure manner). Such an attack might be used when it is not possible to take advantage of other weaknesses in an encryption system (if any exist) that would make the task easier.
</kbq-markdown>
```

### Lists

**Example: Markdown list** (`markdown-list`)

```ts markdown-list-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-list-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-list-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownListExample {}
```

```html ./markdown-list-example.html
<kbq-markdown ngPreserveWhitespaces>
### Ordered List:

1. First item
2. Second item
3. Third item
4. Fourth item

### Unordered List:

- First item
- Second item
- Third item
- Fourth item
</kbq-markdown>
```

### Inline code

**Example: Markdown code** (`markdown-code`)

```ts markdown-code-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-code-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-code-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownCodeExample {}
```

```html ./markdown-code-example.html
<kbq-markdown ngPreserveWhitespaces>
Use the `bypassSecurityTrustHtml()` function
</kbq-markdown>
```

### Code block

**Example: Markdown code block** (`markdown-code-block`)

```ts markdown-code-block-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-code-block-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-code-block-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownCodeBlockExample {}
```

````html ./markdown-code-block-example.html
<kbq-markdown ngPreserveWhitespaces>
```html
&#60;!DOCTYPE html&#62;
&#60;html lang="en"&#62;
&#60;head&#62;
    &#60;meta charset="UTF-8"&#62;
    &#60;meta name="viewport" content="width=device-width, initial-scale=1.0"&#62;
    &#60;title&#62;Koobiq&#60;/title&#62;
&#60;/head&#62;
&#60;body&#62;
    &#60;app&#62;&#60;/app&#62;
&#60;/body&#62;
&#60;/html&#62;
```
</kbq-markdown>
````

### Horizontal rule

**Example: Markdown divider** (`markdown-divider`)

```ts markdown-divider-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-divider-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-divider-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownDividerExample {}
```

```html ./markdown-divider-example.html
<kbq-markdown ngPreserveWhitespaces>
---
</kbq-markdown>
```

### Link

**Example: Markdown link** (`markdown-link`)

```ts markdown-link-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-link-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-link-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownLinkExample {}
```

```html ./markdown-link-example.html
<kbq-markdown ngPreserveWhitespaces>
[Link](#)

A [`brute-force` attack](#) is a cryptanalytic attack that can, in theory, be used to attempt to decrypt any encrypted data (except for data encrypted in an information-theoretically secure manner).
</kbq-markdown>
```

### Image

**Example: Markdown image** (`markdown-image`)

```ts markdown-image-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-image-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-image-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownImageExample {}
```

```html ./markdown-image-example.html
<kbq-markdown ngPreserveWhitespaces>
![With caption text](https://koobiq.io/assets/images/markdown/markdown-image.png)
*Caption*
</kbq-markdown>
```

### Table

**Example: Markdown table** (`markdown-table`)

```ts markdown-table-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-table-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-table-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownTableExample {}
```

```html ./markdown-table-example.html
<kbq-markdown ngPreserveWhitespaces>
| Default    | Left align | Center align | Right align |
| ---------- | :--------- | :----------: | ----------: |
| Babable    | Zillya     |    ClamAV    |     Acronis |
| Cybereason | McAfee     |    Cyren     |       Zoner |
| ESET NOD32 | Alibaba    |    eScan     |      Dr.Web |
</kbq-markdown>
```

### Line break

To create a line break in a component template, you need to add two spaces `&#32;&#32;` at the end of the line.

**Example: Markdown line break** (`markdown-line-break`)

```ts markdown-line-break-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-line-break-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-line-break-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownLineBreakExample {}
```

```html ./markdown-line-break-example.html
<kbq-markdown ngPreserveWhitespaces>
First line&#32;&#32;
Second line
</kbq-markdown>
```

When using the `markdownText` attribute, you need to add `\n` at the end of the line and also enable the configuration option `{ breaks: true }`.

**Example: Markdown line break** (`markdown-line-break-with-markdown-text-input`)

```ts markdown-line-break-with-markdown-text-input-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown, kbqMarkdownMarkedOptionsProvider } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-line-break-with-markdown-text-input-example',
    imports: [KbqMarkdown],
    // prettier-ignore
    template: `
        <kbq-markdown markdownText="First line\nSecond line" />
    `,
    providers: [kbqMarkdownMarkedOptionsProvider({ breaks: true })],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownLineBreakWithMarkdownTextInputExample {}
```

## API

### Components

#### KbqMarkdown (component)

Component which allows to convert `Markdown` into `HTML`

```ts
@Component({ selector: 'kbq-markdown' })
class KbqMarkdown {
    readonly markdownText = input<string | null>(null);
}
```

- `[markdownText]`: `string | null` — `Markdown` text. Falls back to the projected content while it is empty.

### Constants

#### KBQ_MARKDOWN_MARKED_OPTIONS (const)

List of options for `marked` library.

```ts
const KBQ_MARKDOWN_MARKED_OPTIONS: InjectionToken<MarkedOptions>;
```

#### kbqMarkdownMarkedOptionsProvider (const)

Utility provider for `KBQ_MARKDOWN_MARKED_OPTIONS`.

```ts
const kbqMarkdownMarkedOptionsProvider: (
    options: MarkedOptions
) => Provider;
```

## Examples

### Headers combinations

**Example: Markdown headers combinations** (`markdown-headers-combinations`)

```ts markdown-headers-combinations-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-headers-combinations-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-headers-combinations-example.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownHeadersCombinationsExample {}
```

```html ./markdown-headers-combinations-example.html
<kbq-markdown ngPreserveWhitespaces>
## Data Protection System
### Security Levels
#### Threat Types

Recommended password length is 12 characters, encryption key length is 256 bits. Weak passwords are not rejected, the system raises security requirements.

### Attack Detection

Monitoring happens in real time. Multiple incidents form a unified threat picture. New events are displayed in the security log. If there are many threats, critical ones are highlighted with priority. Most often attacks are detected automatically, but an administrator can initiate a manual check.
</kbq-markdown>
```

### Large article

**Example: Markdown article** (`markdown-article`)

```ts markdown-article-example.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { KbqMarkdown } from '@koobiq/components/markdown';

@Component({
    selector: 'markdown-article-example',
    imports: [KbqMarkdown],
    templateUrl: './markdown-article-example.html',
    styles: `
        :host ::ng-deep img[alt='image-with-custom-width'] {
            width: 50%;
        }
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class MarkdownArticleExample {}
```

````html ./markdown-article-example.html
<kbq-markdown ngPreserveWhitespaces>
# Cybersecurity Fundamentals

![With caption text](https://koobiq.io/assets/images/markdown/markdown-image.png)
*Caption*

## Network Security

Cybersecurity is the practice of protecting systems, networks, and programs from digital attacks. These cyberattacks are usually aimed at accessing, changing, or destroying sensitive information; extorting money from users; or interrupting normal business processes.

Implementing effective cybersecurity measures is particularly challenging today because there are more devices than people, and attackers are becoming more innovative. A successful cybersecurity approach has multiple layers of protection spread across the computers, networks, programs, or data that one intends to keep safe.

## Data Protection

### Encryption Standards

Network security involves protecting the usability and integrity of network and data. It includes both hardware and software technologies. Effective network security manages access to the network and targets a variety of threats and stops them from entering or spreading on your network.

### Authentication Methods

Multi-factor authentication adds an extra layer of security by requiring users to provide two or more verification factors to gain access to a resource. This significantly reduces the risk of unauthorized access even if passwords are compromised.

## Threat Detection

![image-with-custom-width](https://koobiq.io/assets/images/markdown/markdown-image.png)
*Image with custom width*

Advanced persistent threats represent sophisticated, long-term cyber attacks where intruders gain access to a network and remain undetected for extended periods. These attacks are typically aimed at stealing data rather than causing damage to the network or organization. Threat detection systems use machine learning and behavioral analysis to identify suspicious activities and potential security breaches before they can cause significant damage.

> Security is not a product, but a process that requires continuous monitoring and improvement.

Incident response planning is crucial for organizations to effectively handle security breaches when they occur. A well-structured incident response plan helps minimize damage and recovery time.

1. Identify and assess the security incident
2. Contain the threat to prevent further damage
3. Eradicate the threat from all affected systems
4. Recover normal operations and monitor for signs of weakness

Risk assessment and vulnerability management are ongoing processes that help organizations identify potential security gaps. Regular security audits and penetration testing help ensure that security measures remain effective against evolving threats.

Cybersecurity awareness training is essential for all employees as human error remains one of the leading causes of security breaches. Regular training helps staff recognize phishing attempts, social engineering tactics, and other common attack vectors.

### Security Monitoring

Security information and event management systems collect and analyze security-related data from various sources across an organization's infrastructure.

```bash
$ nmap -sS -O 192.168.1.1
```

### Compliance Standards

#### Regulatory Requirements

Organizations must comply with various cybersecurity regulations and standards depending on their industry and location. These may include GDPR, HIPAA, SOX, and industry-specific requirements that mandate specific security controls and practices.

- Regular security assessments and audits
- Implementation of appropriate technical and organizational measures
- Incident reporting and breach notification procedures

Continuous improvement in cybersecurity requires staying updated with the latest threats, technologies, and best practices in the field.
</kbq-markdown>
````