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é?

🧱 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.

1
import React, { useContext } from 'react';
2
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
3
// Ajouter des thèmes pour Prism
4
import nightOwlNight from 'prism-react-renderer/themes/nightOwlLight';
5
import nightOwl from 'prism-react-renderer/themes/nightOwl';
6
import Prism from 'prism-react-renderer/prism';
7
// Un fichier personnel pour valider le mode clair ou obscur dans mon blogue, tu peux le supprimer
8
import { ThemeContext } from '../Layout';
9

10
// On va importer les langages dont on a besoin
11
require('prismjs/components/prism-php');
12
require('prismjs/components/prism-ruby');
13
require('prismjs/components/prism-yaml');
14
require('prismjs/components/prism-docker');
15
require('prismjs/components/prism-bash');
16
require('prismjs/components/prism-ignore');
17

18
interface Props {
19
  children?: string;
20
  className: string;
21
}
22

23
const Code = ({ children, className }: Props): JSX.Element => {
24
  const context = useContext(ThemeContext);
25
  const language = (className.replace(/language-/, '') || '') as Language;
26

27
  return (
28
    <Highlight
29
      {...defaultProps}
30
      theme={context.isLightTheme ? nightOwlNight : nightOwl}
31
      code={children}
32
      language={language}
33
    >
34
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
35
        <pre className={`${className} overflow-x-auto`} data-testid="code-highlight" style={{ ...style }}>
36
          {tokens.map((line, index) => {
37
            const lineProps = getLineProps({ line, key: index });
38
            return (
39
              <div key={index} {...lineProps}>
40
                {line.map((token, key) => (
41
                  <span key={key} {...getTokenProps({ token, key })} />
42
                ))}
43
              </div>
44
            );
45
          })}
46
        </pre>
47
      )}
48
    </Highlight>
49
  );
50
};
51

52
export default Code;

Donc, si tu utilises MDX ou similaires pour créer tes pages. Tu peux écrire le composant comme suit.

1
import { MDXProvider } from '@mdx-js/react';
2
import { MDXRenderer } from 'gatsby-plugin-mdx';
3
import Code from '../components/Mdx/Code'; // Le composant qu'on a crée
4

5
const MyCode = (props: { children: string; className: string }) => <Code {...props} />;
6

7
<MDXProvider components={{ code: MyCode }}>
8
  <MDXRenderer>{mdx.body}</MDXRenderer>
9
</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.

1
require('prismjs/components/prism-php');
2
require('prismjs/components/prism-ruby');
3
require('prismjs/components/prism-yaml');
4
require('prismjs/components/prism-docker');
5
require('prismjs/components/prism-bash');
6
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.

Corrections? Recommandations? Clique ici pour modifier cette page dans Github

Mes articles ne sont pas generés par l'IA, cependant ils pourrait y être corrigés. Le premier brouillon est ma création originale

Dans d'autres langues

Gatsby: colorizar código usando react-prism-renderer

Gatsby: Code syntax highlighting with react-prism-renderer

Auteur