Code blocks

Writing content Code blocks

Code blocks are supported by default as in markdown, but you can also use additional features.

Naming

To add a name to your code block, you can specify the name parameter using code block metadata

index.md

```typescript name="my-file.ts"
const myVar = 'Hello world';
```

my-file.ts

const myVar = 'Hello world';

Grouping

Several code blocks can be grouped together, for this you need to specify the group and name parameters, for each code block you want to group, for example, to group two code blocks, you can write the following

index.md

```typescript group="my-group1" name="world"
const myVar = 'Hi world!';
```

```typescript group="my-group1" name="mom"
const myVar = 'Hi Mom!';
```

world

mom

const myVar = 'Hi world!';

By default, first tab will be active, but you can specify the active tab by adding active parameter to change that.

index.md

```typescript group="my-group2" name="world"
const myVar = 'Hi world!';
```

```typescript group="my-group2" name="mom" active
const myVar = 'Hi Mom!';
```

world

mom

const myVar = 'Hi Mom!';

Icons

You can add icons to your code blocks, for this you need to specify the icon parameter, this will fork for groups and single code blocks, for example, to add icon to a single code block, you can write the following.

To know how to add your own icons, please read Icons article.

index.md

```typescript name="my.component.ts" icon="angular"
@Component()
export class MyComponent {}
```

my.component.ts

@Component()
export class MyComponent {}

Lines highlighting

You can highlight specific lines in your code block, for this you need to specify the line numbers you want to highlight after the language name, for example, to highlight line 3, you can write the following

index.md

```typescript {3}
const myVar = 'Hello world';

console.log(myVar);
```

const myVar = 'Hello world';

console.log(myVar);

You can also highlight multiple lines, or lines ranges:

index.md

```typescript {1,3-5,8}
import { NgDocPage } from '@ng-doc/core';

const NicePage: NgDocPage = {
  title: `What a nice page!`,
  mdFile: './index.md',
};

export default NicePage;
```

import { NgDocPage } from '@ng-doc/core';

const NicePage: NgDocPage = {
  title: `What a nice page!`,
  mdFile: './index.md',
};

export default NicePage;

Loading code from a file

To load the code from a file you need to specify the file parameter, and the path to the file relative to your template

index.md

```typescript file="./ng-doc.page.ts"

```

import { NgDocPage } from '@ng-doc/core';

import WritingContentCategory from '../ng-doc.category';

const CodeBlocksPage: NgDocPage = {
  title: `Code blocks`,
  mdFile: './index.md',
  category: WritingContentCategory,
  order: 4,
};

export default CodeBlocksPage;

To load specific lines from the file, you can provide them at the end of the file parameter, for example, to load lines from 5 to 10, you can write the following

index.md

```typescript file="./ng-doc.page.ts"#L5-L10

```

const CodeBlocksPage: NgDocPage = {
  title: `Code blocks`,
  mdFile: './index.md',
  category: WritingContentCategory,
  order: 4,
};

To load one line, you can write this

index.md

```typescript file="./ng-doc.page.ts"#L12

```

export default CodeBlocksPage;

And to load from a specific line to the end of the file, you can don't specify the end line

index.md

```typescript file="./ng-doc.page.ts"#L4-

```

const CodeBlocksPage: NgDocPage = {
  title: `Code blocks`,
  mdFile: './index.md',
  category: WritingContentCategory,
  order: 4,
};

export default CodeBlocksPage;