v2: render code block with syntax highlighting on the server (#2932)

Author: SamyPesse

packages/gitbook/src/components/DocumentView/CodeBlock/CodeBlock.tsx

@@ -1,17 +1,19 @@
 import type { DocumentBlockCode } from '@gitbook/api';
 
 import { getNodeFragmentByType } from '@/lib/document';
+import { isV2 } from '@/lib/v2';
 
 import type { BlockProps } from '../Block';
 import { Blocks } from '../Blocks';
 import { ClientCodeBlock } from './ClientCodeBlock';
-import { type RenderedInline, getInlines } from './highlight';
+import { CodeBlockRenderer } from './CodeBlockRenderer';
+import { type RenderedInline, getInlines, highlight } from './highlight';
 
 /**
  * Render a code block, can be client-side or server-side.
  */
-export function CodeBlock(props: BlockProps<DocumentBlockCode>) {
-    const { block, document, style, context } = props;
+export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
+    const { block, document, style, isEstimatedOffscreen, context } = props;
     const inlines = getInlines(block);
     const richInlines: RenderedInline[] = inlines.map((inline, index) => {
         const body = (() => {
@@ -34,5 +36,11 @@ export function CodeBlock(props: BlockProps<DocumentBlockCode>) {
         return { inline, body };
     });
 
+    if (isV2() && !isEstimatedOffscreen) {
+        // In v2, we render the code block server-side
+        const lines = await highlight(block, richInlines);
+        return <CodeBlockRenderer block={block} style={style} lines={lines} />;
+    }
+
     return <ClientCodeBlock block={block} style={style} inlines={richInlines} />;
 }