Gatsby: Colorier la syntaxe avec react-prism-renderer
J’écris des tutoriels pour des langages de programmation différents.
Comme j’utilise Gatsby, pour montrer de code coloré, on peut employer react-prism-renderer . C’est un bon plugiciel pour le faire. Par défaut, il vient avec une grande variété de coding languages actifs. C’est mon composant pour enseigner mes *snippets *de code dans mon blogue.
Mais quand j’écrivais des blocs de code, certains n’étaient pas colorés. Qu’est-ce qui est passé?
Mise à jour 2023: J’ai changé le composant à Shiki
🧱 Mon composant pour colorer le code
React prism renderer utilise PrismJS, et on peut le profiter. On doit importer le langage qu’on a besoin de colorer.
Ceci le code. Avec ce snippet, on peut créer un composant React dans Gatsby. Faire attention des lignes avec require.
import React, { ReactElement, useContext } from "react";import Highlight, { defaultProps, Language } from "prism-react-renderer";// Ajouter des thèmes pour Prismimport nightOwlNight from "prism-react-renderer/themes/nightOwlLight";import nightOwl from "prism-react-renderer/themes/nightOwl";import Prism from "prism-react-renderer/prism";// Un fichier personnel pour valider le mode clair ou obscur dans mon blogue, tu peux le supprimerimport { ThemeContext } from "../Layout";
// On va importer les langages dont on a besoinrequire("prismjs/components/prism-php");require("prismjs/components/prism-ruby");require("prismjs/components/prism-yaml");require("prismjs/components/prism-docker");require("prismjs/components/prism-bash");require("prismjs/components/prism-ignore");
interface Props { children?: string; className: string;}
const Code = ({ children, className }: Props): ReactElement => { const context = useContext(ThemeContext); const language = (className.replace(/language-/, "") || "") as Language;
return ( <Highlight {...defaultProps} theme={context.isLightTheme ? nightOwlNight : nightOwl} code={children} language={language} > {({ className, style, tokens, getLineProps, getTokenProps }) => ( <pre className={`${className} overflow-x-auto`} data-testid="code-highlight" style={{ ...style }}> {tokens.map((line, index) => { const lineProps = getLineProps({ line, key: index }); return ( <div key={index} {...lineProps}> {line.map((token, key) => ( <span key={key} {...getTokenProps({ token, key })} /> ))} </div> ); })} </pre> )} </Highlight> );};
export default Code;Donc, si tu utilises MDX ou similaires pour créer tes pages. Tu peux écrire le composant comme suit.
import { MDXProvider } from "@mdx-js/react";import { MDXRenderer } from "gatsby-plugin-mdx";import Code from "../components/Mdx/Code"; // Le composant qu'on a crée
const MyCode = (props: { children: string; className: string }) => <Code {...props} />;
<MDXProvider components={{ code: MyCode }}> <MDXRenderer>{mdx.body}</MDXRenderer></MDXProvider>; Et puis, toutes tes balises HTML <code> auront son code coloré
🎙 Qu’est-ce que ce code fait?
Le composant <Highlight/> est utilisé par React Prism Renderer pour ajouter de la couleur à la syntaxe du code.
Certains langages devront être ajoutés explicitement. Je recommande de vérifier le dossier /node_modules/prismjs/components/ pour plus d’information.
require("prismjs/components/prism-php");require("prismjs/components/prism-ruby");require("prismjs/components/prism-yaml");require("prismjs/components/prism-docker");require("prismjs/components/prism-bash");require("prismjs/components/prism-ignore");Le lien originel dont j’ai pris la solution: ici . Ce tutoriel élargit cette réponse.
Le code d’exemple pour être obsolète dans le futur. Jette un coup d’œil à mon composant ici .
