Code
This section provides an overview of code highlighting with code-highlighting package which uses Shik
Adding languages
We load a specific set of languages in highlighter.ts. You can add more languages there (or ask someone to do it for you!).
Basic Example
```typescript
console.log('Hello Xata!');
```Produces:
console.log('Hello Xata!');Titles
```typescript:hello.ts
console.log('Hello Xata!');
```Produces:
hello.ts
console.log('Hello Xata!');Highlight line
```typescript
console.log('1');
console.log('2');
console.log('3'); // [!code highlight]
console.log('4');
console.log('5');
```Produces:
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');Focus line
```typescript
console.log('1');
console.log('2');
console.log('3'); // [!code focus]
console.log('4');
console.log('5');
```Produces:
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');Fade line
```typescript
console.log('1');
console.log('2');
console.log('3'); // [!code fade]
console.log('4');
console.log('5');
```Produces:
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');Highlight word
```typescript
console.log('1');
console.log('2');
console.log('3'); // [!code word:console]
console.log('4');
console.log('5');
```Produces:
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');Diff
```typescript
console.log('1');
console.log('2');
console.log('3'); // [!code --]
console.log('4'); // [!code ++]
console.log('5');
```Produces:
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');Apply to N lines
```typescript
console.log('1');
console.log('2');
console.log('3'); // [!code highlight:3]
console.log('4');
console.log('5');
```Produces:
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');Inline code
You can use the Code component to render inline code.
<Code variant="default">console.log('Hello default!');</Code>
<Code variant="destructive">console.log('Hello destructive!');</Code>
<Code variant="warning">console.log('Hello warning!');</Code>
<Code variant="success">console.log('Hello success!');</Code>Produces:
console.log('Hello default!');console.log('Hello destructive!');console.log('Hello warning!');console.log('Hello success!');