Code Component
The Code component allows you to display code snippets within your application or documentation. It supports specifying the language and an optional title for better organization and clarity.
While the syntax is the same is with regular Markdown code blocks, Doctave supports additional features no available in most Markdown implementation.
Usage
Basic
Use markdown code notation for a code block.
A basic code block
```
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
```
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
Language and syntax highlighting
To activate syntax highlighting, add a language name after the three backticks (```).
A code block with a specified language
```javascript
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
```
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
Title
You may also specify a title for the code block.
Adding a title to a code block
```typescript title=server.ts
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
```
server.ts
const foo = "bar";
[1,2,3].forEach((val) => {console.log(val)});
To use a title, you must specify a language first.
Props
- title: (Optional) Specifies a title for the code block, providing context or a description of the code.
- language: Specifies the programming language of the code snippet. This helps with syntax highlighting and improves readability.