13

✍️📖 Formatos de texto, citas, enlaces y código para mejorar tus aportes con Markdown 👨‍🎨👩‍🎨

Luis
luisca
35211

✍️📖 Formatos de texto, citas, enlaces y código para mejorar tus aportes con Markdown 👨‍🎨👩‍🎨

Anterior:✍️💡 Escribe textos geniales con Markdown 👨‍🎨👩‍🎨

📖 Formatos de texto, citas, enlaces y código para mejorar tus aportes

Las etiquetas de énfasis, permiten resaltar parte del texto sin obligar un salto de línea.

«

  • *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~~
    _**Puedes** combinarlos_
    También puedes ==resaltarlos==

» El código anterior producirá: »

  • 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
    Puedes combinarlos
    También puedes resaltarlos

📑 Citas

Las citas se inician con el símbolo >. También se suele colocar en cursiva el párrafo entre comillas y en el renglón siguiente el autor de la cita. Algunas implementaciones de Markdown eliminan algunas ciertas para evitar inyección de código Sql, aquí recuperamos los espacios arriba y abajo de la cita usando un renglón con texto resaltado (cualquier texto debe servir) y seguido un renglón contres guiones al medio, el cual convierte en encabezado el renglón superior y proporciona los espacios perdidos.

«

> _**“ Los hombres sabios hablan porque tienen algo que decir; los necios porque tienen que decir algo. ”**_` `>>Platón

» El código anterior producirá: »

“ Los hombres sabios hablan porque tienen algo que decir; los necios porque tienen que decir algo. ”
Platón.

🔗 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.

«

http://platzi.com – enlace creado de forma automática!
[Platzi](http://platzi.com)

» El código anterior producirá: »

http://platzi.com – enlace creado de forma automática!

Platzi

📜 Encabezados

Para usar la etiqueta de encabezados, deberás iniciar la línea de texto con dos caracteres ##, así:

«

## Este es un encabezado

» El código anterior producirá: »

Este es un encabezado

En Platzi la etiqueta H1 se encuentra reservada por el sistema para mantener una correcta estructura semántica. Rara vez necesitarás encabezados diferentes al H2.

🔪 Separadores o saltos de línea

Para incluir una espacio de separación entre párrafos deberás, párrafos usar un doble salto de línea. Cuando deseas incluir una línea de separación puedes intentar con tres guiones al medio seguidos.

«

Renglón anterior.
---
Renglón siguiente.

» El código anterior producirá: »

«

Renglón anterior.

Renglón siguiente.

«

Renglón anterior.
==»==
---
Renglón siguiente.

» El código anterior producirá: »

Renglón anterior.
»

Renglón siguiente.

Imgur

Metodo alternativo

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.
«

Salto de línea (insertando imagen en blanco)
Renglón anterior
![Imgur](https://i.imgur.com/X2TrK4G.jpg)
Renglón medio
![Imgur](https://i.imgur.com/EG1jOdW.jpg)
Renglón siguiente

» El código anterior producirá: »

Renglón anterior. (Este texto se incluye como referencia para medir el tamaño del separador)
ImgurRenglón medio
Imgur
Renglón siguiente
O también puedes usar esta otra técnica

«

Renglón anterior.
![url1](https://via.placeholder.com/1x1/f6f6f6/f6f6f6?text=+)
Renglón siguiente.

» El código anterior producirá: »

Renglón anterior.
url1
Renglón siguiente.

🖥️ Sintaxis para incluir código

«

`Una sola línea de código`

» El código anterior producirá: »

Una sola línea de código

También puedes incrustar bloques de código de varias líneas:

«

\````javascript
functionfancyAlert(arg) {

    if(arg) {

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

    }
}
\````

» El código anterior producirá: »

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

🏃🏽‍♀️ Escapar caracteres

«

Para escapar caracteres deberás usar el símbolo \ (barra invertida) justo antes del carácter que se quiere escapar.

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

» El código anterior producirá: »

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

Será necesario hacer esto cuando quieras que alguno de los siguientes caracteres de control sea mostrado en el documento.

\  barra invertida
`  tilde invertida
*  asterisco
_  guión bajo
#  numeral o almohadilla o gato (o como lo llames 😉)
+  símbolo de suma
-  guión
.  punto
!  exclamación
{} llaves
[] corchetes
() paréntesis

«

Para evitar que la creación automática de enlaces, deberás escapar parte de sus caracteres así:

https\:/[]()/example.com/

» El código anterior producirá: »

https://example.com/

«

Continúa tu aprendizaje con:

»

📖📷🎬🍕🆎🔲🌈☑️📺🔣

Hecho con el 💚 en el 2K20.

Escribe tu comentario
+ 2
Ordenar por:
4
63546Puntos

Esta es una prueba de texto resaltado
Y sin resaltado

2
63546Puntos
2 años

Probando los saltos

De línea


Y las rayas


Doble salto

2
63546Puntos
2 años

Prueba final



Estoy probando usar markdown desde mi celular, así que no puedo ver la vista previa pero está genial.
Ahora probaré un salto de línea

¿Hace que el título de arriba sea h2?
O quizá no

2
13325Puntos
un año

¿Cómo hiciste el salto de línea?

3
63546Puntos
un año

Hola 😃

En esta vista de comentarios

basta con dar un “enter” para que se cree.

Pero en los comentarios de las clases del curso no se verá el salto de línea con un “enter”. Así que si quieres que aun así se vea, podrías usar alguna imagen sin fondo 😅

Otra cosa que he visto que hacen es poner puntos entre párrafo y párrafo.
.
De esta manera, así parece que hay un
.
salto de línea.

2
13325Puntos
un año

¡Muchas gracias!. 💚

3
35211Puntos
un año

Me alegra ver como nos ayudamos unos a otros. La comunidad es lo mas valioso de platzi.

3
57174Puntos
8b       d8  ,adPPYba,   ,adPPYb,d8 ,adPPYYba,  
`8b     d8' a8"     "8a a8"    `Y88 ""     `Y8  
 `8b   d8'8b       d8 8b       88 ,adPPPPP88  
  `8b,d8'   "8a,   ,a8""8a,   ,d88 88,    ,88  
    Y88'     `"YbbdP"'   `"YbbdP"Y8 `"8bbdP"Y8  
    d8'                  aa,    ,88             
   d8'                    "Y8bbdP"
3
13632Puntos
Titulo 1Titulo 2
Ejemplo de cuadro comparativoEjemplo de cuadro comparativo
2

“ Los hombres sabios hablan porque tienen algo que decir; los necios porque tienen que decir algo. ”
Platón

2

Realmente esto fue de mucha ayuda para mejorar la estética en la caja de comentarios, ya que todo se miraba pegado y no se tenia un orden y dificultaba la legibilidad de las mismas. Muchas gracias por el dato.

2
17660Puntos

Agradezco mucho tu aporte @luisca, no tenía conocimiento sobre el uso de Markdown. Pero en el caso particular, dentro de las clases, para las citas, no me funciona el código; copio el ejemplo de arriba y me resulta así:

Captura de pantalla 2020-11-11 112307.jpg

Otro caso particular, son las tablas. Lo que noté, es que funciona solamente cuando respondes a un aporte de alguien más, es decir, no funciona cuando creas un aporte nuevo.

Ejemplo aporte nuevo:
Captura de pantalla 2020-11-11 111805.jpg

Ejemplo sumar comentario en el aporte de otro estudiante:
Captura de pantalla 2020-11-11 112021.jpg

¿Habrá forma de solucionarlo?

Saludos

0
35211Puntos
2 años

A veces lo que muestra la cajilla de previsualización no coincide con la forma en que al final se muestra, por eso mi recomendación es que lo intentes.

Ten presente que esta misma publicación es una muestra de lo que es posible y lo que no.

2
17660Puntos
2 años

Ya lo he intentado (tablas y citas) en varias clases de diferentes cursos. El resultado sigue siendo el mismo, e insisto, solo funciona cuando comentas en el aporte de alguien más y no funciona cuando creas un nuevo aporte.

Entiendo lo que dices sobre lo que es y no posible, sería importante recalcar qué códigos funcionan en uno u otro caso para que la gente lo tenga presente a la hora de realizar sus aportes.

0
35211Puntos
2 años

si gustas enviame un enlace al aporte donde no ha funcionado y lo miro ; )

0
35211Puntos
2 años

" Los hombres sabios hablan porque tienen algo que decir; los necios porque tienen que decir algo."
Platón

Código a usar:

>**_" Los hombres sabios hablan porque tienen algo que decir; los necios porque tienen que decir algo."_**
Platón```

Resultado de la prueba 

https://platzi.com/comentario/1935416/
2
17660Puntos
2 años

Resultado de tu prueba:
Captura de pantalla 2020-11-11 155352.jpg
Resultado de mi prueba:
Captura de pantalla 2020-11-11 155415.jpg

Vuelvo a insistir, el código NO FUNCIONA cuando haces un aporte nuevo.

FUNCIONA cuando respondes un aporte ya existente:
Captura de pantalla 2020-11-11 155921.jpg

0
35211Puntos
2 años

creo que aun no comprendo cual es el resultado que te gustaría obtener, pero te leo muy atento.

0
35211Puntos
2 años

Mi ultima recomendación para ti @padhec es que envíes un correo a [email protected] comentándoles tu problema.

De mi parte poco o nada puedo hacer por ti pues solo son un estudiante más.

1
35211Puntos

Si pudiera editarlo le quitaria los titulos repetidos. 🙈