GA-032 (FE) Integrar react-syntax-highlighter componentizado

[joshuacba08]

Como desarrollador, quiero implementar react-syntax-highlighter en mi proyecto de React JS para poder mostrar ejemplos de código y mejorar la experiencia del usuario.

Criterios de aceptación:

• El paquete react-syntax-highlighter se integra correctamente en el proyecto de React JS.
• Se implementa un componente personalizado en React JS que utiliza react-syntax-highlighter para mostrar bloques de código.
• El componente personalizado es configurable por props para permitir la personalización del estilo y lenguaje de programación utilizado.
• Se crea documentación clara y concisa para guiar al usuario en la utilización del componente personalizado.

Definición de terminado:

• El paquete react-syntax-highlighter está correctamente integrado y se utiliza en el componente personalizado de React JS.
• El componente personalizado funciona correctamente y se puede personalizar mediante props.
• La documentación está completa y el usuario puede utilizar el componente personalizado sin dificultades.

Tareas

• [x] Implementar el paquete react-syntax-highlighter en el proyecto de React JS
• [x] Crear un componente personalizado en React JS que utilice react-syntax-highlighter para mostrar bloques de código
• [x] Hacer que el componente personalizado sea configurable por props para permitir la personalización del estilo y lenguaje de programación utilizado
• [ ] Crear documentación clara y concisa para guiar al usuario en la utilización del componente personalizado
• [ ] Asegurarse de que el paquete react-syntax-highlighter esté correctamente integrado y utilizado en el componente personalizado de React JS
• [ ] Asegurarse de que el componente personalizado funcione correctamente y se pueda personalizar mediante props
• [ ] Asegurarse de que la documentación esté completa y el usuario pueda utilizar el componente personalizado sin dificultades

Plan para implementar React Syntax Highlighter

1. Instalar el paquete react-syntax-highlighter usando npm o yarn:

   npm install react-syntax-highlighter
   

2. Importar los componentes necesarios de react-syntax-highlighter en tu proyecto de React: (tiene que ir en el componente a crear)

   import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
   import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
   

3. Crear un nuevo componente de React para mostrar bloques de código usando el componente SyntaxHighlighter:

   function CodeBlock(props) {
     return (
       <SyntaxHighlighter language={props.language} style={dark}>
         {props.code}
       </SyntaxHighlighter>
     );
   }
   

   En este ejemplo, el componente CodeBlock toma dos props: language (el lenguaje de programación del bloque de código) y code (el código real a mostrar).

4. Usar el componente CodeBlock en tu proyecto de React:

   function App() {
     return (
       <div>
         <h1>Mi aplicación de React</h1>
         <CodeBlock language="javascript" code="console.log('¡Hola, mundo!');" />
       </div>
     );
   }
   

   Este ejemplo muestra cómo usar el componente CodeBlock para mostrar un bloque de código de JavaScript.

5. Añadir props al componente CodeBlock para permitir la personalización:

   function CodeBlock(props) {
     return (
       <SyntaxHighlighter language={props.language} style={props.style}>
         {props.code}
       </SyntaxHighlighter>
     );
   }
   

   En este ejemplo actualizado, el componente CodeBlock toma una tercera prop, style, que permite al usuario personalizar la apariencia del bloque de código.

6. Crear documentación para el componente CodeBlock:

   • Explicar el propósito del componente y sus props
   • Proporcionar ejemplos de cómo utilizar el componente
   • Incluir capturas de pantalla del componente en acción

Siguiendo estos pasos, puedes implementar con éxito react-syntax-highlighter en tu proyecto de React y crear un componente personalizado para mostrar bloques de código.

Cualquier otro aspecto a añadir u otra idea más es bienvenida.