9

🚀 👨‍🚀 Enriquece tus aportes con imágenes, videos, emojis y diferentes estilos de escritura: Guía de referencia de Markdown en Platzi. 💚

Luis
luisca
35088

Te doy la bienvenida a esta guía elaborada con el objetivo de servir de referencia para publicaciones en 🚀 Platzi 🤘 . Si la plataforma es nueva para ti, te recomiendo visitar primero la siguiente entrada del blog: "Lo que debes saber si eres nuevo en Platzi". Si ya la has leído, comencemos:

¿Qué es Markdown?

Markdown es una forma de diseñar texto en la web. Tú controlas la visualización del documento; resaltando palabras en negrita o cursiva, agregando emojis 😃, imágenes, creando listas o tablas. Estas son solo algunas de las cosas que podemos hacer con Markdown. Principalmente, Markdown es simplemente texto normal con algunos caracteres no alfabéticos, como # o * ` _ -.
Imgur

Puedes usar Markdown por ejemplo para crear la documentación de tus proyectos en Git-hub como en los tutoriales, preguntas y respuestas del foro y en el blog de Platzi.

Imgur
A continuación encontrarás un resumén de las etiquetas validas en Platzi. Para implementarlas simplemente debes copiar el texto tal cual como se muestra en la zona sombreada y pegarlo en la casilla de texto para obtener el resultado mostrado justo a continuación de la frase “El código anterior producirá:”.

Imágenes

Si usas el navegador chrome en la versión web, podrás adjuntar imágenes arrastrando la imagen de tu explorador de archivos, a la casilla donde escribes el comentario - Mira aquí un breve video demostrativo aportado por un estudiante.

Imgur
El método más seguro es subir la imagen a un servicio gratuito e incrustarla mediante el formato que sigue la siguiente regla: Texto alternativo para la imagen entre corchetes cuadrados, precedido por el símbolo de cierre de exclamación y para finalizar, entre paréntesis, la url donde se encuentra almacenada la imagen.
Imgur
![Platzi landing](https://i.imgur.com/rcTzwNG.png)

![Platzi gif](https://media.giphy.com/media/IaW2sIHyOKLkb1dRpi/giphy.gif)
Imgur
El código anterior producirá:

Platzi landing
Platzi gif

Youtube

Youtube cuenta con vasto contenido que puede enriquecer tus preguntas o respuestas. Incrustar un video en lugar de incluir solo el enlace, le permitirá a tus compañeros entender tu punto de vista sin tener que salir de la plataforma, y sin perder el hilo de la idea.
Imgur
Para incrustarlo deberás, iniciar con @ [youtube] seguido de (id del video | url del video).
Imgur
@[youtube]( ZYmIUiK8ZQI|https://www.youtube.com/watch?v=ZYmIUiK8ZQI)
Imgur
El código anterior producirá:

Imgur
También es posible incluir el punto en la línea de tiempo donde deseas que comience la reproducción del video.
Imgur
@[youtube]( aO107SK9M1g|https://youtu.be/aO107SK9M1g?t=30)
Imgur
El código anterior producirá 🐼:

Encabezados

Para usar la etiqueta de encabezados, deberás iniciar la línea de texto con dos caracteres ##, así:
Imgur
## Este es un encabezado
Imgur
El código anterior producirá:

Este es un encabezado

En platzi solo se encuentra disponible la etiqueta H2, las etiquetas H1 y demás se encuentran reservadas por el sistema.

Enlaces

Los enlaces se pueden insertar copiando y pegando la url completa (no recomendado por falta de legibilidad) o siguiendo la siguiente regla: El texto alternativo para el enlace entre corchetes cuadrados seguido de la url dentro de paréntesis.
Imgur
http://github.com – enlace creado de forma automática!
[Platzi](http://platzi.com)
Imgur
El código anterior producirá:
Imgur
http://github.com – enlace creado de forma automática!
Platzi

Sintaxis para incluir código

Conocer la sintaxis para ingresar código en tus aportes, comentarios y preguntas es clave para poder expresarte correctamente. Gran parte de la dificultad al momento de resolver una duda, es la falta de claridad en lo que se está preguntando. Cuando usas la sintaxis de código, permites que la persona que quiere ayudarte a resolver tu duda, pueda copiar y pegar tú código en su propia maquina, de tal manera que en cuestión de segundos puede ayudarte.
Imgur
Puedes incluir una sola línea de código, usando la tilde invertida al comienzo y al final de la linea.
Imgur
`Una sola línea de código`
Imgur
El código anterior producirá:
Imgur
Una sola línea de código
Imgur
También puedes incrustar un bloque de código de varias líneas, usando cuatro tildes invertidas en un reglón aparte, tanto al comienzo como al final del bloque - pero sin incluir las barras invertidas \ que se muestran a continuación.

\````javascript
functionfancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
\````

El código anterior producirá:

functionfancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

Etiquetas de Énfasis

Las etiquetas de énfasis, permiten resaltar parte del texto sin obligar un salto de línea.
Imgur
*Este texto aparecerá en cursiva*
_Este texto también aparecerá en cursiva_
**Este texto aparecerá en negrilla**
__Este texto también aparecerá en negrilla__
~~Este texto aparecerá tachado~~
_También **puedes** combinarlos_
Imgur
El código anterior producirá:
Imgur
Este texto aparecerá en cursiva
Este texto también aparecerá en cursiva
Este texto aparecerá en negrilla
Este texto también aparecerá en negrilla
Este texto aparecerá tachado
También puedes combinarlos

Listas Ordenadas

1. Ítem 1
1. Ítem 2
1. Ítem 3
   1. Ítem 3a
   1. Ítem 3b

El código anterior producirá:

  1. Ítem 1
  2. Ítem 2
  3. Ítem 3
    1. Ítem 3a
    2. Ítem 3b

Listas No ordenadas

* Ítem 1
* Ítem 2
  * Ítem 2a
  * Ítem 2b

El código anterior producirá:

  • Ítem 1
  • Ítem 2
    • Ítem 2a
    • Ítem 2b

Citas

Para citar una fuente, un pensamiento propio, o bien separar semánticamente un párrafo de texto, puedes usar el símbolo > al inicio del párrafo. También es posible añadir niveles de indentación en las citas, colocando un símbolo > por cada nivel de indentación.
Imgur
> ## _**«Hay que tener la mente abierta. Pero no tanto como para que se te caiga el cerebro».**_ - Richard Feynman.
Imgur
El código anterior producirá:
Imgur

«Hay que tener la mente abierta. Pero no tanto como para que se te caiga el cerebro». - Richard Feynman.

Tablas

Las tablas pueden tener tantas columnas y filas como sea necesario. Las columnas se separan con el símbolo | y es necesario incluir la segunda línea como se muestra a continuación:
Imgur
Primer Encabezado | Segundo Encabezado | Tercer Encabezado
------------ | ------------- | -------------
Columna 1 fila 1 | Columna 2 fila 1 | Columna 3 fila 1
Columna 1 fila 2 | Columna 2 fila 2 | Columna 3 fila 2
Columna 1 fila 3 | Columna 2 fila 3 | Columna 3 fila 3

Imgur
El código anterior producirá:
Imgur

Primer EncabezadoSegundo EncabezadoTercer Encabezado
Columna 1 fila 1Columna 2 fila 1Columna 3 fila 1
Columna 1 fila 2Columna 2 fila 2Columna 3 fila 2
Columna 1 fila 3Columna 2 fila 3Columna 3 fila 3

Separadores

Para incluir una línea de separación puedes intentar con tres guiones al medio seguidos.

---

El código anterior producirá:


Renglón siguiente. (Apropiada cuando quieres que el espacio sea pequeño)
Imgur
Si la etiqueta anterior deja una separación muy pequeña, intenta utilizando alguna de estas dos imágenes siguientes. Elige la que mejor te funcione.
Imgur
Salto de línea (insertando imagen en blanco)
![Imgur](https://i.imgur.com/X2TrK4G.jpg)
![Imgur](https://i.imgur.com/EG1jOdW.jpg)
Imgur
El código anterior producirá:
Imgur
Renglón siguiente. (Este texto se incluye como referencia para medir el tamaño del separador)
Imgur
Renglón siguiente. (Este texto se incluye como referencia para medir el tamaño del separador)

Escapar caracteres

Para escapar caracteres se debe usar el símbolo \ justo antes del carácter que se quiere escapar. (Por ejemplo un parámetro que sirva de control y desaparezca con el formato)
Imgur
En el siguiente caso, vemos su utilidad.
Imgur
- [ ] \(Si vas a incluir paréntesis después de corchetes cuadrados) será necesario escapar el primer paréntesis
Imgur
El código anterior producirá:

  • [ ] (Si vas a incluir paréntesis después de corchetes cuadrados) será necesario escapar el primer paréntesis

Emojis

Para incluir un emoji siempre podrás copiar y pegar el emoji mismo (como se muestra en la primera columna) o también podrás insertarlo mediante la etiqueta mostrada en la columna central (incluyendo los : ). En la tercera columna podrás ver como Platzi interpreta las etiquetas de la segunda columna. A continuación los más usados. Si deseas ver un listado completo ve a este enlace.

Imgur
EmojiEtiqueta markdownHabilitada
😄:smile:😄
😁:grin:😁
😆:laughing:😆
😅:sweat_smile:😅
🤣:rofl::rofl:
😂:joy:😂
🙂:slightly_smiling_face:🙂
🙃:upside_down_face:🙃
😉:wink:😉
😊:blush:😊
😇:innocent:😇
🥰:smiling_face_with_three_hearts::smiling_face_with_three_hearts:
😍:heart_eyes:😍
🤩:star_struck::star_struck:
😘:kissing_heart:😘
😗:kissing:😗
😚:kissing_closed_eyes:😚
😙:kissing_smiling_eyes:😙
😋:yum:😋
😛:stuck_out_tongue:😛
😜:stuck_out_tongue_winking_eye:😜
🤪:zany_face::zany_face:
😝:stuck_out_tongue_closed_eyes:😝
🤑:money_mouth_face:🤑
🤗:hugs:🤗
🤭:hand_over_mouth::hand_over_mouth:
🤫:shushing_face::shushing_face:
🤔:thinking:🤔
🤐:zipper_mouth_face:🤐
🤨:raised_eyebrow::raised_eyebrow:
😐:neutral_face:😐
😑:expressionless:😑
😶:no_mouth:😶
😏:smirk:😏
😒:unamused:😒
🙄:roll_eyes:🙄
😬:grimacing:😬
🤥:lying_face::lying_face:
😌:relieved:😌
😔:pensive:😔
😪:sleepy:😪
🤤:drooling_face::drooling_face:
😴:sleeping:😴
😷:mask:😷
🤒:face_with_thermometer:🤒
🤕:face_with_head_bandage:🤕
🤠:cowboy_hat_face::cowboy_hat_face:
🥳:partying_face::partying_face:
😎:sunglasses:😎
🤓:nerd_face:🤓
🧐:monocle_face::monocle_face:
😕:confused:😕
😟:worried:😟
🙁:slightly_frowning_face:🙁
☹️:frowning_face:☹️
😮:open_mouth:😮
😯:hushed:😯
😲:astonished:😲
😳:flushed:😳
🥺:pleading_face::pleading_face:
😦:frowning:😦
😧:anguished:😧
😨:fearful:😨
😢:cry:😢
😭:sob:😭
😈:smiling_imp:😈
💀:skull:💀
☠️:skull_and_crossbones:☠️
💩:shit:💩
🤡:clown_face::clown_face:
👹:japanese_ogre:👹
👺:japanese_goblin:👺
👻:ghost:👻
👽:alien:👽
👾:space_invader:👾
🤖:robot:🤖
🙈:see_no_evil:🙈
🙉:hear_no_evil:🙉
🙊:speak_no_evil:🙊
💋:kiss:💋
💌:love_letter:💌
💝:gift_heart:💝
💖:sparkling_heart:💖
❤️:heart:❤️
💚:green_heart:💚
👨‍🚀:man_astronaut::man_astronaut:
👩‍🚀:woman_astronaut::woman_astronaut:
🦸‍♂️:superhero_man::superhero_man:
🦸‍♀️:superhero_woman::superhero_woman:
✖️:heavy_multiplication_x:✖️
:heavy_plus_sign:
:heavy_minus_sign:
:heavy_division_sign:
♾️:infinity::infinity:
‼️:bangbang:‼️
⁉️:interrobang:⁉️
:question:
:grey_question:
:grey_exclamation:
:exclamation:❗️
:heavy_exclamation_mark:❗️
©️:copyright:©️
®️:registered:®️
™️:tm:™️
#️⃣:hash:#️⃣
🇨🇴:colombia:🇨🇴
🇪🇸:es:🇪🇸
🇪🇺:eu:🇪🇺
🇵🇦:panama:🇵🇦
🇻🇪:venezuela:🇻🇪
🚀:rocket:🚀

Imgur
Has llegado al final. Si te gustó, no olvides dejar un 💚.

Escribe tu comentario
+ 2
2
30348Puntos

Excelente aporte deberías de ponerlo en la sección de comunidad para que mas personas lo puedan ver y así que puedan aprovechar este conocimiento, también borrar los otros aportes que se parecen a este porque es algo confuso saber cual es la que esta más actualizado.

Saludos.

1
35088Puntos
2 años

Muchas gracias @CriSTEM, me tomo mas intentos de los que pense 😅 pero ya solicite al team @platzi que borre las que contienen errores. 😉