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
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:

First item
Second item
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

waldohidalgo / waldo_markdown_previewer Goto Github PK

waldo_markdown_previewer's Introduction