#CodeBlockRuntime non-ejectable

CodeBlockRuntime отображает исполняемые блоки кода во время выполнения.

#Использование

import { CodeBlockRuntime } from '@rspress/core/theme';

export default function Page() {
  return (
    <CodeBlockRuntime
      lang="js"
      title="index.js"
      code={`console.log('Привет, мир!')`}
      shikiOptions={{}}
    />
  );
}

console.log('Hello World!')

Передайте lang, title и code для рендеринга блока; shikiOptions настраивает подсветку синтаксиса и также поддерживает трансформеры.

#Использование опций shiki

Вот пример использования трансформера для подсветки строк:

import { CodeBlockRuntime } from '@rspress/core/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()],
  }}
/>

console.log('Highlighted'); // [!code highlight]
// [!code highlight:1]
console.log('Highlighted');
console.log('Not highlighted');

#Импорт содержимого файлов

Вы можете использовать query-параметр ?raw для импорта содержимого файла как строки и передачи его в проп code. Подробности см. в главе Rsbuild - Статические ресурсы.

import { CodeBlockRuntime } from '@rspress/core/theme';
import codeContent from './example.ts?raw';

<CodeBlockRuntime lang="ts" title="example.ts" code={codeContent} />

Этот подход подходит для сценариев, когда необходимо динамически отображать содержимое внешних файлов, например, для показа примеров кодовых файлов.