components/code/code-block.tsx

component·app·0.5 KB · 21 lignes· Voir l'itinéraire

Annotation non disponible

Lance npm run annotate (nécessite ANTHROPIC_API_KEY dans .env.local) pour générer une annotation française par Claude Haiku 4.5.

1 export

CodeBlock

Code source· tsx

import { highlightCode } from "@/lib/highlight";

interface Props {
  code: string;
  language: string;
}

/**
 * Server async component : pré-rend le code coloré shiki côté serveur.
 * Zéro JS client. Look VS Code natif.
 */
export async function CodeBlock({ code, language }: Props) {
  const html = await highlightCode(code, language);
  return (
    <div
      className="shiki-wrapper overflow-x-auto rounded-md text-xs"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

import { highlightCode } from "@/lib/highlight";

interface Props {
  code: string;
  language: string;
}

/**
 * Server async component : pré-rend le code coloré shiki côté serveur.
 * Zéro JS client. Look VS Code natif.
 */
export async function CodeBlock({ code, language }: Props) {
  const html = await highlightCode(code, language);
  return (
    <div
      className="shiki-wrapper overflow-x-auto rounded-md text-xs"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}