Código Solución del Proyecto Markdown Previewer

El presente repositorio contiene el código solución del proyecto número dos, requisito para obtener la certificación Front End Development Libraries de Freecodecamp.

• Código Solución del Proyecto Markdown Previewer
  • Objetivo
  • Requisitos
  • Librerías Utilizadas
  • Proyecto Aprobado
  • Screenshots adicionales
    • Proyecto en pantallas grandes con dos columnas
    • Proyecto en pantallas grandes con una columna
    • Proyecto en pantallas small
• Código Markdown utilizado como placeholder
  • Waldo's React Markdown Previewer!
  • This is a H1 heading
    • This is a H2 heading.
      • And this is a H3 heading
      • Javascript
      • HTML
      • CSS
      • Handlebars
      • Python
      • JSX
      • Java
      • SQL

Objetivo

Construir un convertidor de Markdown a código HTML en el flavor de Github

Requisitos

Librerías Utilizadas

Tecnologías Utilizadas
Nextjs 12
React 17
ReactDom 17
React Icons
Marked
Marked-highlight
Marked-emoji
Dompurify
Highlight.js
Typewriter-effect

Proyecto Aprobado

A continuación muestro la imagen del proyecto en el cual apruebo TODOS los test requeridos por Freecodecamp:

Screenshots adicionales

Proyecto en pantallas grandes con dos columnas

Proyecto en pantallas grandes con una columna

Proyecto en pantallas small

Código Markdown utilizado como placeholder

A continuación muestro el código markdown convertido a HTML que he utilizado como placeholder en el Markdown Editor:

Waldo's React Markdown Previewer!

This is a H1 heading

This is a H2 heading.

And this is a H3 heading

This is a bold text

This is an italic text

This is bold and italic text

This is a blockquote

This is a strikethrough.

My parser too supports some emojis 🎉 :

-That is so funny! 😂
-That is so cool! 🎉 -Go to space!: 🚀

This is a link to emoji github code: Github emoji code

This is a ordered list:

1. First item

2. Second item

3. Third item

This is an unordered list:

• First item

• Second item

• Third item

This is a inline code: <p>Hello</p>, between 2 backticks.

That are some code blocks:

Javascript

document.getElementById("demo").innerHTML = "John Doe";

HTML

<h1>Hello World!</h1>

CSS

.titulo {
  color: red;
  text-align: center;
}

Handlebars

{{> Header}}

Python

fruits = ["apple", "banana", "cherry"]
for x in fruits:
print(x)

JSX

const element = <a href="https://www.reactjs.org"> link </a>;

Java

class HelloWorld {
public static void main(String args[])
{
System.out.println("Hello, World");
}
}

SQL

SELECT * FROM helloworld WHERE phrase = "Hello, World!";

This is a link: Next.js Documentation

And if you want to get really crazy, even tables:

Name	Last Name	Age
Waldo	Hidalgo	34
John	Doe	32
Jane	Doe	28

And if you want to add a task list:

• Write the press release
• Update the website
• Contact the media