Markdown

Code Block with Title

Input:

```js title="foo.js"
console.log('Hello, world!')
```

Output:

foo.js

console.log('Hello, world!')

Code Tabs

Input:

import { CodeTabs } from 'starlight-theme-nova/components'

<CodeTabs>

```js title="foo.js"
function foo() {
  console.log('Foo!')
}
```

```ts title="bar.ts"
function bar() {
  console.log('Bar!')
}
```

</CodeTabs>

Output:

foo.js
bar.ts

foo.js

function foo() {
  console.log('Foo!')
}

bar.ts

function bar() {
  console.log('Bar!')
}

Line Highlighting in Code Blocks

Input:

```js {1,3-4}
console.log('1')
console.log('2')
console.log('3')
console.log('4')
```

```ts
console.log('Not highlighted')
console.log('Highlighted') // [!code highlight]
console.log('Not highlighted')
```

Output:

console.log('1')
console.log('2')
console.log('3')
console.log('4')

console.log('Not highlighted')
console.log('Highlighted') 
console.log('Not highlighted')

Word Highlighting in Code Blocks

Input:

```js /Hello/
const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World
```

```ts
// [\!code word:World]
const message = 'Hello World'
console.log(message) // prints Hello World
```

Output:

const msg = 'Hello World'
console.log(msg)
console.log(msg) // prints Hello World

const message = 'Hello World'
console.log(message) // prints Hello World

Diff Highlighting in Code Blocks

Input:

```ts
console.log('hewwo') // [!code --]
console.log('hello') // [!code ++]
console.log('goodbye')
```

Output:

console.log('hewwo') 
console.log('hello') 
console.log('goodbye')

Twoslash

Nova supports Twoslash out of the box. Hover over the code block to see the inline type.

Input:

```ts twoslash
// @errors: 2551
const div = document.createElement('h1')
div.style.colour = 'red' // Incorrect CSS property name
```

Output:

const divconst div: HTMLHeadingElement = documentvar document: Document[MDN Reference](https://developer.mozilla.org/docs/Web/API/Window/document).createElementDocument.createElement<"h1">(tagName: "h1", options?: ElementCreationOptions): HTMLHeadingElement (+2 overloads)Creates an instance of the element for the specified tag.
@paramtagName The name of an element.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/createElement)('h1')
divconst div: HTMLHeadingElement.styleElementCSSInlineStyle.style: CSSStyleDeclaration[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/style).colour = 'red' // Incorrect CSS property nameProperty 'colour' does not exist on type 'CSSStyleDeclaration'. Did you mean 'color'?

Table

Name	Age	City
John	25	New York
Jane	30	Los Angeles
Jim	35	Chicago

List

Ordered List

Number 1
Number 2
Number 3

Unordered List

Bullet 1
Bullet 2
Bullet 3

Task List

Checkbox 1
Checkbox 2
Checkbox 3

Heading

Heading IDs

Using headings in Markdown will automatically give you anchor links so you can link directly to certain sections of your page. See Automatic heading anchor links for more details.

In addition, you can also manually add anchor links to headings by adding {#heading-id} to the heading.

### Hello World {#my-custom-id}

Or in MDX:

### Hello World \{#my-custom-id\}

Example:

Heading 4
Section titled “Heading 4”

Heading 5
Section titled “Heading 5”

Heading 6
Section titled “Heading 6”

With custom IDs
Section titled “With custom IDs”