Markdown

代码块 (带标题)

输入:

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

输出:

foo.js

console.log('Hello, world!')

代码标签页

输入:

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>

输出:

foo.js

foo.js

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

bar.ts

bar.ts

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

代码行突出显示

输入:

```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')
```

输出:

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

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

代码中的单词突出显示

输入:

```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
```

输出:

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

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

代码行差异突出显示

输入:

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

输出:

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

Twoslash

Nova 开箱即支持 Twoslash. 将鼠标悬停在代码块上, 即可看到内联类型.

输入:

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

输出:

const div = document.createElement('h1')
div.style.colour = 'red' // Incorrect CSS property name
Property 'colour' does not exist on type 'CSSStyleDeclaration'. Did you mean 'color'?

表格

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

列表

有序列表

1. Number 1
2. Number 2
3. Number 3

无序列表

• Bullet 1
• Bullet 2
• Bullet 3

任务列表

• Checkbox 1
• Checkbox 2
• Checkbox 3

标题

标题 锚链接

在 Markdown 中使用标题会自动为您提供锚链接, 这样您就可以直接链接到页面的某些部分. 详情请参阅 自动生成标题锚点链接.

此外，您还可以通过在标题中添加 {#heading-id} 为标题手动添加锚链接.

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

或者在 MDX 中:

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

示例:

Heading 4

Heading 5

Heading 6

With custom IDs