#代码块

Rspress V2 默认使用 Shiki 提供语法高亮，高亮计算都在编译期完成，这意味着运行时会有更高的性能。

在使用多种语言代码块的时候，会在编译时自动获取对应语言，也不会增大运行时包体，支持的编程语言可参考 Shiki 支持的语言列表。

#基本使用

你可以使用 ``` 语法来创建代码块。例如：

```js
console.log('Hello World');
```

它将被渲染为：

console.log('Hello World');

#代码块标题

你可以使用 title="..." 属性为代码块添加标题。

```jsx title="src/components/HelloCodeBlockTitle.tsx"
const HelloCodeBlockTitle = (props) => {
  return <h1>Hello CodeBlock Title</h1>;
};
```

它将被渲染为：

const HelloCodeBlockTitle = (props) => {
  return <h1>Hello CodeBlock Title</h1>;
};

#外部文件代码块

你可以使用 file="./path/to/file" 属性并不书写任何代码块内容，来引用外部文件中的文本。

```tsx file="./_tsx-component.tsx"

```

它将被渲染为：

import { useState } from 'react';

export default () => {
  const [count, setCount] = useState(0);
  return (
    <p>
      这是来自 tsx 的组件{' '}
      <button onClick={() => setCount(count => count + 1)}>{count}</button>
    </p>
  );
};

#Notation 行高亮

你可以使用 Shiki transformers 中的 transformerNotationHighlight 配合 // [!code highlight] 注释来高亮代码行。

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

它将被渲染为：

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

#Meta 行高亮

你可以使用 @rspress/core/shiki-transformers 中的 transformerCompatibleMetaHighlight 配合 meta 信息注释来高亮代码行。

```ts {1,3-4}
console.log('Highlighted');
console.log('Not highlighted');
console.log('Highlighted');
console.log('Highlighted');
```

它将被渲染为：

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

#显示代码行号

如果你想要显示代码行号，你可以在配置文件中开启 showLineNumbers 选项:

export default {
  // ...
  markdown: {
    showLineNumbers: true,
  },
};

#Wrap code

如果你想要默认启用长代码换行展示，你可以在配置文件中开启 defaultWrapCode 选项:

export default {
  // ...
  markdown: {
    defaultWrapCode: true,
  },
};

#Diff 代码块

```diff
function test() {
- console.log('deleted');
+ console.log('added');
  console.log('unchanged');
}
```

它将被渲染为：

function test() {
- console.log('deleted');
+ console.log('added');
  console.log('unchanged');
}

#Shiki transformers

Rspress 在 V2 中，使用 Shiki 进行编译时的代码高亮，提供了灵活扩展的代码块能力。

通过配置 markdown.shiki.transformers 添加自定义 shiki transformers 来实现更加丰富的代码块效果。

除了上文中的 transformerNotationHighlight，Rspress 默认支持 @shikijs/transformers 中的以下 transformers。

#transformerNotationDiff

```ts
console.log('deleted'); // [\!code --]
console.log('added'); // [\!code ++]
console.log('unchanged');
```

它将被渲染为：

console.log('deleted'); 
console.log('added'); 
console.log('unchanged');

#transformerNotationErrorLevel

```ts
console.log('No errors or warnings');
console.error('Error'); // [\!code error]
console.warn('Warning'); // [\!code warning]
```

它将被渲染为：

console.log('No errors or warnings');
console.error('Error'); 
console.warn('Warning'); 

#transformerNotationFocus

```ts
console.log('Not focused');
console.log('Focused'); // [\!code focus]
console.log('Not focused');
```

它将被渲染为：

console.log('Not focused');
console.log('Focused'); 
console.log('Not focused');

#Twoslash

TwoSlash 是一种用于 TypeScript 代码的标记格式，适合创建自包含的代码示例，并让 TypeScript 编译器自动补充类型信息和提示，广泛应用于 TypeScript 官网。

Rspress 提供了 @rspress/core/plugin-twoslash 插件，它可以在 Rspress 中使用 Twoslash 功能。详见 @rspress/plugin-twoslash 文档

const str: string = 1;
Type 'number' is not assignable to type 'string'.

#运行时语法高亮

当需要在运行时动态渲染代码块，比如在交互式文档中，或者需要远程拉取代码块内容。Rspress 提供了 CodeBlockRuntime 组件。

以下是一个示例：

import { CodeBlockRuntime } from '@theme';
import { transformerNotationHighlight } from '@shikijs/transformers';

<CodeBlockRuntime
  lang="ts"
  title="highlight.ts"
  code={`console.log('Highlighted'); // [\!code highlight]
// [\!code highlight:1]
console.log('Highlighted');
console.log('Not highlighted');`}
  shikiOptions={{
    transformers: [transformerNotationHighlight()],
  }}
/>