Renderizar MarkDown de GitHub

Índice

  1. Introducción
  2. Estilos MarkDown
  3. Componente React

Introducción

Para renderizar Markdown de GitHub en una aplicación de React, puedes utilizar la biblioteca react-markdown. Esta biblioteca permite analizar y renderizar contenido Markdown en componentes React. Asegúrate de revisar la documentación de react-markdown para obtener información más detallada:react-markdown en GitHub. Aquí hay una guía paso a paso para lograrlo:

Aquí vamos a crear un componente de React para poder hacer un fetch de nuestros README.md

  1. Para empezar vamos a instalar las siguientes dependencias:
    2. bash
    1npm install react-markdown
  2. Para importar los estilos de GitHub, tienes que importarlo en tu componente:
    3. javascript
    1@import 'github-markdown-css';
  3. Personaliza los estilos adicionales a tu gusto:
    4. css
    1.markdown-body {
    2    box-sizing: border-box;
    3    min-width: 200px;
    4    max-width: 980px;
    5    margin: 0 auto;
    6    padding: 45px;
    7}
  4. Para agregar estilos aplicamos un className en nuestro componente:
    5. javascript
    1return (
    2<div className="markdown-body">
    3  <ReactMarkdown>{markdownContent}</ReactMarkdown>
    4</div>
    5);

Estilos MarkDown

Para replicar los estilos de GitHub en tu componente ReactMarkdown, puedes utilizar una librería de estilos específica de GitHub llamada "github-markdown-css". Puedes instalarla usando npm o yarn, y luego importarla en tu archivo de estilos y aplicarla al componente ReactMarkdown. Aquí hay una forma de hacerlo:

bash
1npm install github-markdown-css

Importa la librería de estilos en tu archivo de estilos (por ejemplo, styles.css):

javascript
1/* styles.css */
2 @import 'github-markdown-css/github-markdown.css';

Debes usar el componenterehypeRawproporcionado por ReactMarkdown para habilitar la interpretación de HTML

javascript
1import rehypeRaw from 'rehype-raw'; // Importa rehypeRaw para habilitar la interpretación de HTML
2

3return (
4    <div className="markdown-body custom-container">
5        <ReactMarkdown
6            rehypePlugins={[rehypeRaw]} // Usa rehypeRaw para habilitar la interpretación de HTML
7        >
8            {markdownContent}
9        </ReactMarkdown>
10    </div>
11);

Para estilos específicos de GitHub y manejo de imágenes, puedes utilizar más plugins de rehype. Aquí hay algunos ejemplos:

  • rehype-slug: Agrega IDs únicos a los encabezados, lo cual puede ser útil para anclas en enlaces internos.
bash
1npm install rehype-slug

En tu componente:

javascript
1import rehypeSlug from 'rehype-slug';
2

3// ...
4              
5<ReactMarkdown
6rehypePlugins={[rehypeRaw, rehypeSlug]}
7>
8{markdownContent}
9</ReactMarkdown>
  • rehype-autolink-headings: Agrega enlaces automáticos a los encabezados.
bash
1npm install rehype-autolink-headings

En el componente:

javascript
1import rehypeAutolinkHeadings from 'rehype-autolink-headings';
2

3// ...
4              
5<ReactMarkdown
6rehypePlugins={[rehypeRaw, rehypeSlug, rehypeAutolinkHeadings]}
7>
8{markdownContent}
9</ReactMarkdown>
  • rehype-highlight: Resalta el código en bloques de código.

En el componente:

javascript
1import rehypeHighlight from 'rehype-highlight';
2

3// ...
4              
5<ReactMarkdown
6rehypePlugins={[rehypeRaw, rehypeSlug, rehypeAutolinkHeadings, rehypeHighlight]}
7>
8{markdownContent}
9</ReactMarkdown>

Componente React

Aquí les dejo un ejemplo más completo de cómo lo pueden implementar:

javascript
1import React, { useState, useEffect } from 'react';
2import ReactMarkdown from 'react-markdown';
3import rehypeHighlight from 'rehype-highlight';
4import rehypeRaw from 'rehype-raw';
5import rehypeSlug from 'rehype-slug';
6import rehypeAutolinkHeadings from 'rehype-autolink-headings';
7import 'github-markdown-css/github-markdown.css'; // Importa la librería de estilos
8import 'highlight.js/styles/github-dark.css'; // Se puede elegir el estilo HighLight del <pre> 
9

10const MarkdownRenderer = () => {
11    const [markdownContent, setMarkdownContent] = useState('');
12

13    useEffect(() => {
14        const githubMarkdownURL =
15            'https://raw.githack.com/solidsnk86/neo-scraper/master/README.md';
16    
17        fetch(githubMarkdownURL)
18            .then((response) => response.text())
19            .then((data) => setMarkdownContent(data))
20            .catch((error) =>
21                console.error('Error al buscar el documento Markdown:', error),
22            );
23    }, []);
24  
25    return (
26        <div>
27            <ReactMarkdown
28                rehypePlugins={[
29                    rehypeRaw,
30                    rehypeSlug,
31                    rehypeAutolinkHeadings,
32                    [rehypeHighlight, { ignoreMissing: true }],
33                ]}
34                components={{
35                    pre: ({ children }) => (
36                        <div className="code-block">
37                              <pre>{children}</pre>
38                        </div>
39                    ),
40                    li: ({ children }) => <li className="custom-li">{children}</li>,
41                }}
42                className="space-y-1"
43            >
44                {markdownContent}
45            </ReactMarkdown>
46        </div>
47    );
48};
49

50export default MarkdownRenderer;

Eso es todo por aquí, espero les haya gustado y lo puedan implementar en algún proyecto. Ante cualquier duda o consulta pueden escribirme en elfeedbackde NeoTecs.

Compartir

Todos los nombres de productos, logos y marcas son propiedad de sus respectivos creadores.