8 novembre 2024

Comment utiliser Shiki 式 Syntax highlighter avec NextJS et Tailwind

Créez votre projet Next.js

Avant toute chose, si vous n'avez pas encore de projet Next.js, démarrez avec une commande magique :

pnpm dlx create-next-app@latest code-block --ts --tailwind --app --use-pnpm

Vous pouvez ensuite répondre au question du bootstrap

Et voilà, vous avez un projet tout frais, prêt à développer un CodeBlock aux petits oignons.

Téléchargez les fichiers de votre thème VS Code préféré

Allez dans votre éditeur VS Code et trouver votre thème favoris. Un big shout-out au créateur de Pace Theme pour ce magnifique style !

Ensuite, copiez les fichiers de thème, en json, vers votre projet Next.js, par exemple dans lib/themes.

Placez-les dans un dossier dédié pour garder votre structure de fichiers propre. Par exemple, ici pour un dual theme :

./lib/themes/dark.json et ./lib/themes/light.json

Installez Shiki

pnpm add shiki

Créez une fonction `highlightCode`

Maintenant, attaquons-nous à l'essentiel, une fonction highlightCode qui va transformer votre code en une œuvre d’art. Ajoutez ce petit bijoux :

lib/highlight-code.ts

import { promises as fs } from "node:fs";
import path from "node:path";
import { createHighlighter } from "shiki";

export async function highlightCode(code: string, language: string) {
  const darkTheme = await fs.readFile(
    path.join(process.cwd(), "lib/themes/dark.json"),
    "utf-8",
  );

  const lightTheme = await fs.readFile(
    path.join(process.cwd(), "lib/themes/light.json"),
    "utf-8",
  );

  const highlighter = await createHighlighter({
    themes: [JSON.parse(darkTheme), JSON.parse(lightTheme)],
    langs: [language],
  });

  const html = highlighter.codeToHtml(code, {
    lang: language,
    themes: {
      light: "Pace Light",
      dark: "Pace Dark",
    },
  });

  highlighter.dispose();

  return html;
}

Créez un composant Server pour injecter le code stylisé

Maintenant, créons un composant qui va nous permettre d’injecter tout ce code avec style dans notre page ! Créez code-block.tsx dans votre dossier components :

code-block.tsx

import type React from "react";
import { highlightCode } from "@/lib/highlight-code";

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

export default async function CodeBlock({
  code,
  language,
}: CodeBlockWrapperProps) {
  const highlightedCode = await highlightCode(code, language);

  return (
    <div
      dangerouslySetInnerHTML={{ __html: highlightedCode }}
    />
  );
}

Créez un composant wrapper Client Side pour un style au top

On va ajouter un wrapper client pour donner un peu de vie au bloc de code avec une option de copie, des défilements, et autres bonus sympas. Voici CodeBlockWrapper :

code-block-wrapper.tsx

"use client";

import { CheckIcon, Copy } from "lucide-react";
import React from "react";

interface CodeBlockWrapperProps extends React.HTMLAttributes<HTMLElement> {
  code: string;
  filename?: string;
}

export function CodeBlockWrapper({
  children,
  code,
  filename,
  ...props
}: CodeBlockWrapperProps) {
  const [isOpened, setIsOpened] = React.useState(false);
  const [hasCopied, setHasCopied] = React.useState(false);

  React.useEffect(() => {
    const timeoutId = setTimeout(() => {
      setHasCopied(false);
    }, 2000);
    return () => clearTimeout(timeoutId);
  }, [hasCopied]);

  const copyToClipboard = () => {
    setHasCopied(true);
    navigator.clipboard.writeText(code);
  };

  return (
    <figure
      className="group relative my-4 overflow-y-hidden rounded-md border focus-visible:outline-none"
      {...props}
    >
      {filename && (
        <div className="flex flex-row items-center justify-between gap-2 border-b px-4 py-1.5">
          <figcaption>{filename}</figcaption>
          <button
            type="button"
            onClick={copyToClipboard}
            className="size-6 [&_svg]:size-4"
          >
            <span className="sr-only">Copy</span>
            {hasCopied ? <CheckIcon /> : <Copy />}
          </button>
        </div>
      )}
      <div className="overflow-auto">
        <div className="table min-w-full">
          {!filename && (
            <button
              type="button"
              onClick={copyToClipboard}
              className="absolute top-2 right-4 size-6 [&_svg]:size-4"
            >
              <span className="sr-only">Copy</span>
              {hasCopied ? <CheckIcon /> : <Copy />}
            </button>
          )}
          <div
            className={`w-full rounded-md font-mono text-sm leading-relaxed [&_pre]:p-4 ${
              !isOpened ? "max-h-[350px]" : ""
            }`}
          >
            {children}
          </div>

          {code.split("\n").length > 10 && (
            <div className="absolute inset-x-0 bottom-0 flex items-center justify-center bg-gradient-to-b from-transparent to-gray-100 p-2 dark:to-gray-700">
              <button
                type="button"
                onClick={() => setIsOpened(!isOpened)}
                className="text-pink-400 text-xs"
              >
                {isOpened ? "Collapse" : "Expand"}
              </button>
            </div>
          )}
        </div>
      </div>
    </figure>
  );
}

Configurer le thème sombre et clair pour Shiki

Avant d'utiliser notre composant CodeBlockWrapper, il nous faut ajouter un peu de CSS pour que les thèmes sombre et clair s'adaptent automatiquement.

Ajoutez ce code dans votre fichier CSS global :

/* SHIKI */
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

Utilisez le composant et admirez

Enfin, le moment est venu de voir le résultat ! Appelez CodeBlockWrapper, passez-lui votre code, et admirez le rendu:

<CodeBlockWrapper
  code={code}
  filename={filename}
>
  <CodeBlock code={code} language={language} />
</CodeBlockWrapper>

PS : tous les blocs de code de mon portfolio sont générés comme ça ! Pas mal, non ?

Et voilà ! Votre code est maintenant prêt à briller avec Shiki, et dans le thème de votre choix. 🎉

Si vous voulez aller plus en profondeur dans le code, voici le repo de mon portfolio où j'explique exactement comment j'ai fait : components/utils/code-block-wrapper.tsx