Code

Display code blocks and inline code snippets.

Code blocks

Create syntax-highlighted code blocks.

function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet("World"));

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));
```

Language

Specify the programming language for syntax highlighting.

def calculate_sum(a, b):
    return a + b

result = calculate_sum(5, 3)
print(result)

```python
def calculate_sum(a, b):
    return a + b

result = calculate_sum(5, 3)
print(result)
```

Filename

Add a filename to your code block.

app.js

function init() {
    console.log("App initialized");
}

init();

```javascript [app.js]
function init() {
  console.log('App initialized');
}

init();
```

Line highlighting

Highlight specific lines in your code.

app.js

function calculateTotal(items) {
    let sum = 0;
    for (let item of items) {
        sum += item.price;
    }
    return sum;
}

```javascript [app.js] {2,4}
function calculateTotal(items) {
  let sum = 0;
  for (let item of items) {
    sum += item.price;
  }
  return sum;
}
```

Code diff

Show differences between code versions.

config.js

const settings = {
  theme: 'dark',
- language: 'en',
+ language: 'es',
  notifications: true
};

```diff [config.js]
const settings = {
  theme: 'dark',
- language: 'en',
+ language: 'es',
  notifications: true
};
```

Inline code

Display code snippets inline with your text.

Use the console.log() function to print messages.

Use the `console.log()` function to print messages.

Prop	Default	Type
`lang`		`string`
`color`	`neutral`	`error` `primary` `secondary` `success` `info` `warning` `neutral`

Color

Change the color of inline code.

The error variable contains important information.

The `error`{color="error"} variable contains important information.

Language

Specify the language for inline code.

yaplet.ts

`yaplet.ts`{lang="ts-type"}