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

Escribo tutoriales de programación para distintos lenguajes.

Como yo uso Gatsby, para tener código colorido utilizo react-prism-renderer. Es un buen plugin para hacerlo. Por defecto, viene con una gran variedad de lenguajes de programación activados. Este es el componente que uso para mostrar mis snippets de código en mi blog.

Pero cuando estaba escribiendo unos bloques de código, vi que algunos lenguajes no estaban colorizados por defecto. ¿Qué estaba pasando?

🧱 Mi componente para colorear el código

Tras el telón. React prism renderer utiliza PrismJS, y podemos utilizarlo para nuestro beneficio. Necesitamos importar el lenguaje que necesitemos para agregarle soporte.

Aquí está el código. Con este snippet, podemos crear un componente React en Gatsby. Pon atención a las líneas con require.

1
import React, { useContext } from 'react';
2
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
3
// Cargando los temas para 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 archivo personal con temas claro / oscuro para mi blog, puedes remover esto y sus referencias
8
import { ThemeContext } from '../Layout';
9

10
// Acá importamos los lenguajes que necesitamos
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;

Entonces, si estás usando MDX o algo similar para crear tus páginas. Puedes usar el componente de la siguiente manera.

1
import { MDXProvider } from '@mdx-js/react';
2
import { MDXRenderer } from 'gatsby-plugin-mdx';
3
import Code from '../components/Mdx/Code'; // El componente que creamos antes
4

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

7
<MDXProvider components={{ code: MyCode }}>
8
  <MDXRenderer>{mdx.body}</MDXRenderer>
9
</MDXProvider>;

Ahora todas tus etiquetas HTML <code> tendrán el código con color.

🎙 Explicando el código

El componente <Highlight/> es usado por React Prism Renderer para añadir color a la síntaxis del código, como puedes ver en el ejemplo arriba.

Algunos lenguajes tendrán que ser agregados explícitamente. Esto está hecho a propósito para cargar sólo lo necesario. Recomiendo visitar tu carpeta /node_modules/prismjs/components/ para más información.

1
// Aquí es donde importamos los lenguajes que necesitamos
2
require('prismjs/components/prism-php');
3
require('prismjs/components/prism-ruby');
4
require('prismjs/components/prism-yaml');
5
require('prismjs/components/prism-docker');
6
require('prismjs/components/prism-bash');
7
require('prismjs/components/prism-ignore');

Enlace original de la respuesta donde se agregan más lenguajes: aquí . Este tutorial es una extensión a esa respuesta.

El código de este ejemplo puede estar desactualizado cuando lo leas. Siempre echa un vistazo a la última versión aquí

¿Correcciones? ¿Recomendaciones? Click aquí para editar esta página en Github

Mis posts no son generados por la IA, sin embargo, podrían estar corregidos por ella. El primer borrador siempre es de mi creación

En otros lenguajes

Gatsby: Colorier la syntaxe avec react-prism-renderer

Gatsby: Code syntax highlighting with react-prism-renderer

Autor

Escrito por Helmer Davila