#CodeBlockRuntime non-ejectable

CodeBlockRuntime renders runnable code blocks at runtime.

#Usage

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

export default function Page() {
  return (
    <CodeBlockRuntime
      lang="js"
      title="index.js"
      code={`console.log('Hello World!')`}
      shikiOptions={{}}
    />
  );
}

console.log('Hello World!')

Pass lang, title, and code to render the block; shikiOptions customizes highlighting and also supports transformers.

#Using shiki options

Notation syntax for line and word highlighting, diff, focus, and error/warning annotations works by default. Use shikiOptions.transformers to add custom transformers or override a built-in transformer by its name.

Here is an example using line highlighting without configuration:

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

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

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

#Importing file content

You can use the ?raw query to import file content as a string and pass it to the code prop. See Rsbuild - Static Assets for details.

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

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

This approach is suitable for scenarios where you need to dynamically display external file content, such as showing example code files.