web-infra-dev/rspress v2.0.0-beta.8

on GitHub

Highlights✨

Add <CodeBlockRuntime /> component for dynamic code block highlighting

related PR: #2190, #2206

This is an escape hatch, which can be used for dynamic code block highlighting when the shiki highlighting at compile time does not meet your needs.

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()],
  }}
/>

What's Changed

New Features 🎉

• feat: enable rehype-raw plugin by default by @JounQin in #2199
• feat(CodeBlockRuntime): add shikiOptions prop by @SoonIter in #2208
• feat(plugin-shiki): add @rspress/plugin-shiki/transformers exports and transformerCompatibleMetaHighlight by @SoonIter in #2209
• feat(CodeBlockRuntime): add onRendered prop by @SoonIter in #2211

Bug Fixes 🐞

• fix(CodeBlockRuntime): CodeBlockRuntime should render the same dom structure with compile-time code block by @SoonIter in #2206

Other Changes

• fix: children should be unavailable for CodeBlockRuntime by @JounQin in #2205
• Revert "feat: enable rehype-raw plugin by default (#2199)" by @SoonIter in #2207
• Release v2.0.0-beta.8 by @SoonIter in #2210

Full Changelog: v2.0.0-beta.7...v2.0.0-beta.8