Guia avanzada para markdown.

mvangel2304 (47)Miembro SVin Steem Venezuela • 3 years ago

Hola a todos, hoy les traigo una guía para mejorar la estructura de su publicación en Steemit, toda esta información a continuación se puede hacer en el editor, no necesitará instalar nada más ni tener software extra para esto. hay mucha gente que no entiende de esto y para ellos especialmente es esta guía, empezando con: ¿Que es markdown?

Wikipedia lo define así:

Markdown es un lenguaje de marcado ligero creado por John Gruber que trata de conseguir la máxima legibilidad y facilidad de publicación tanto en su forma de entrada como de salida, inspirándose en muchas convenciones existentes para marcar mensajes de correo electrónico usando texto plano.

Puede sonar algo confuso pero es todo lo contrario, el editor de post en Hive utiliza este formato de forma inteligente para ayudarte a editar tus publicaciones sin que tengas ningún conocimiento sobre el lenguaje, es algo similar a lo que hace Word.

Ahora, si bien el editor nos brinda un montón de buenas opciones al momento de escribir nuestras publicaciones, el verdadero potencial de este no esta a la vista, y ese es el motivo de esta publicación, voy a mostrarte como utilizar el lenguaje markdown para embellecer tus post y darles un tono único, la guía sera escalada desde lo mas fácil hasta lo mas avanzado, sin mas que decir, vamos allá.
^{Si quieres mas saber teoría sobre este lenguaje, puedes hacerlo a través de este enlace}

EJEMPLO:

**Asi es como debes *escribirlo* en tu editor, cuidado con donde y como colocas los simbolos.**

Y asi es como se vera en tu publicacion:
Asi es como debes escribirlo en tu editor, cuidado con los simbolos.

Encabezados / Headings:

Empezamos con lo mas basico, los encabezados.

^{Hay hasta seis niveles de encabezados que podemos usar en nuestras publicaciones añadiendo este simbolo '#' seguido de un espacio antes de escribir.}

# 1 uno
## 2 two
### 3 tres 
#### 4 four
##### 5 cinco
###### 6 six

Y se verán así:

1 uno

2 two

3 tres

4 four

5 cinco

6 six

Formateo de texto:

Negritas:
**Texto de ejemplo en negritas con asteriscos dobles**


cursivas:
*Texto de ejemplo en cursivas con asteriscos sencillo*


Tachado:
~~Texto de ejemplo en cursivas con asteriscos sencillo~~


Negrita Cursiva:
**_Texto de ejemplo cursivas y a la vez negritas_**

Y se verán así:

Negritas / Bold:
Texto de ejemplo en negritas con asteriscos dobles

cursivas / Italic:
Texto de ejemplo en cursivas con asteriscos sencillo

Tachado / Strikethrough:
~~Texto de ejemplo en cursivas con asteriscos sencillo~~

Negrita Cursiva / Bold Italic:
Texto de ejemplo cursivas y a la vez negritas

Lineas Horizontales:

^{Son lineas que se dibujan alli donde las marcas, se pueden usar para separar segmentos de texto}

***
Uno
- - -
Dos
___
Tres

Y se verán así:

Uno

Two

Tres

Posicionar Texto:

^{Puedes hacer que el texto este centrado, justificado, e incluso hacerlo que se alinee hacia la derecha o hacia la
izquierda}

<center>
Texto que quieres centrar.
</center>

<div class="text-justify">
texto que quieres justificar, agregare contenido sin razon para que la oracion se haga mas larga y se pueda apreciar la justificacion. Recuerda, si te está gustando esta publicacion, votala, y sigueme para que sigas viendo mas contenido como este, muchas gracias
</div>

<div class="text-right"><p>texto hacia la derecha</p></div>   

<div class="text-left"><p>texto hacia la izquierda</p></div>

Y se verán así:

¡Sigueme!

texto que quieres justificar, agregare contenido sin razon para que la oracion se haga mas larga y se pueda apreciar la justificacion. Recuerda, si te está gustando esta publicacion, votala, y sigueme para que sigas viendo mas contenido como este, muchas gracias.

¡Dale upvote!

¡compartelo en tu perfil!

Enlaces / Links:

^{Puedes enlazar texto o incluso imagenes para que al hacer click en ellos te dirija a una pagina en especifico que tu elijas.}

[Titulo del enlace](Enlace al que deseas dirigir)

[![nombre de la fuente](URL de la imagen)](URL de la fuente)

Una vez editados los comandos, se ve asi:

Enlace normal:
Mi perfil, Sigueme

Imagen que es enlace:

Citas:

^{Puedes agregar texto citado cuando estas publicando informacion perteneciente a otra persona.}

Bloque de codigo:

Lei [aqui](link a la cita)

> esto esta citado

> Esto sería una cita normal
> 
> > Dentro de ella puedes agregar otra cita
> 
> La cita principal llegaría hasta aquí

Y se vera asi:

Lei aqui

esto esta citado

Esto sería una cita normal

Dentro de ella puedes agregar otra cita

La cita principal llegaría hasta aqui

Tablas:

^{Puedes crear tablas para enmarcar datos organizados dentro de tu publicacion.}

Cabecera A | Header B
-- | --
Campo A0 | Field B0
Campo A1 | Field B1

Puedes añadir estos marcos, para tener mayor orden al escribir aunque no cambia nada el resultado final:

| Cabecera A | Header B |
| ---------- | ---------- |
| Campo A0   | Field B0   |
| Campo A1   | Field B1   |

Tambien puedes añadir mas de 2 cabezeras y mas de 2 campos:

| Element | Cantidad | Price |
| :------- | :------: | :-----: |
| Item 1   | 15       | 150$   |
| Item 2   | 3250     | 23,65$ |
| Item 3   | 250     | 13,45$ |

Y se verian asi:

Cabecera A	Header B
Campo A0	Field B0
Campo A1	Field B1

Con los marcos añadidos el resultado visual es el mismo:

Cabecera A	Header B
Campo A0	Field B0
Campo A1	Field B1

Tambien puedes añadir mas de 2 cabezeras y mas de 2 campos:

Element	Cantidad	Price
Item 1	15	150$
Item 2	3250	23,65$
Item 3	250	13,45$

Texto en codigo:

^{Si resulta que quieres agregar a tu publicacion algun trozo de texto que no quieres que se formatee, añades este simbolo: `}

Este es un texto normal `este es un trozo de texto con codigo` este es otro texto normal.

Y se vera asi:

Este es un texto normal este es un trozo de texto con codigo este es otro texto normal.

Posicionar imagenes:

^{Asi como el texto, las imagenes tambien pueden ser movidas para que se ajusten a la linea que queramos, sea central o alguno de los laterales.}

Derecha / Right:
<div class="pull-right">enlace de la imagen<p><a href="enlace de la fuente">
<center>Nombre de la Fuente</center></a></p></div>

Izquierda / Left:
<div class="pull-left">enlace de la imagen<p><a href="enlace de la fuente">
<center>Nombre de la Fuente</center></a></p></div>

Y una vez editados los campo correspondientes, se veria asi:

Mi Perfil

Superponer texto:

^{Es exactamente lo que estas viendo en este texto que estas leyendo, debajo veras un ejemplo.}

Hola <sup>este texto esta superpuesto</sup> aqui continua el parrafo

Se ve asi:

Hola ^{este texto esta superpuestod} aqui continua el parrafo

Dos columnas de texto:

^{Este codigo sirve para agregar dos columnas de texto, lo cual resulta bastante llamativo al momento de leer, ya que simula el estilo de un libro.}

<div class=pull-left>ESCRIBE EL TEXTO DE LA COLUMNA IZQUIERDA AQUI.</div><div class=pull-right>ESCRIBE EL TEXTO DE LA COLUMNA DERECHA AQUI.</div>

Y una vez editado, se veria asi:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna varius, mollis urna elementum, egestas nibh. Mauris vehicula tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna varius, mollis urna elementum, egestas nibh. Mauris vehicula tellus.

Y asi, amigos lectores, llegamos al final de esta guia, espero que les sea de utilidad, si hay algo que no entiendas o que quieras que te explique mejor, hazmelo saber en los comentarios, de igual manera, si quieres una segunda guia donde te dare consejos utiles de como aplicar estos codigos combinados para hacer publicaciones o incluso mejores, tambien hazmelo saber en los comentarios y empezare a trabajar en ella, gracias por la atencion.