Online Markdown Editor con VUE 3


¿Qué vamos a construir? Grabé la construcción de este proyecto, espero sea de tu agrado. Aquí trabajamos con Babel, Lint y VUE en su versión 3. Introducción y seis clases prácticas donde alcanzamos un resultado que podemos palpar.

Markdown nos ayuda a crear documentos ligeros que en nuestro caso vamos a renderizar y convertir en HTML. Sinceramente es muy popular del mundo y lo vemos en todos los README en Github. La propuesta es ¡Quiero escribir mis publicaciones en MD y ver el resultado mientras voy escribiendo!

Introducción

youtube

Creación de un proyecto

En esta clase creamos al proyecto con el CLI de VUE, en el proceso escogemos la opción manual para explicar qué es babel y las herramientas lint. También escogemos a la versión 3 de VUEjs.

CLI: Significa interfaz de línea de comandos y es un pequeño programa nos permite dar ordenes a la computadora mediante un texto sencillo.

youtube

Estructura de nuestro ONLINE Editor

En esta clase creamos a nuestra estructura y componente para luego implementar el diseño planeado.

youtube

Markdown a HTML en VUE 3

En esta clase convertimos a nuestro contenido markdown a HTML, conseguimos que directamente funciones el editor.

youtube

Diseño web, editor Markdown

En esta clase trabajamos con CSS, implementamos nuestro diseño planeado.

youtube

Resaltador de código con Highlight.js

En esta clase trabajamos con el componente highlight.js para resaltar a nuestro código, es interesante porque vemos cómo VUE se puede integrar con otros componentes.

youtube

Repaso del Online Markdown Editor

En esta clase hacemos un repaso de lo construido, miramos conceptos y el código de nuestro proyecto.

youtube

¿Qué te pareció?

Comparte con tus colegas y compañeros...

Compartir en: Facebook Twitter