Súper Guía de Markdown por: @mery.morales25

in #projectmilkbox7 years ago (edited)

Este post es dedicado a todas aquellas personas que están iniciando en el mundo de Steemit y quieren aprender a hacer mejores post usando el lenguaje de Markdown.
Adicionalmente busco ayudar y cooperar con toda la comunidad de @milkbox.info, esperando que les sea de mucha utilidad…

Fuente


Texto

Para hacer aún más llamativos nuestros post, será necesario que este bien estructurado y para ello contaremos con diversas herramientas:

1) Cursiva

Estas son una de las formas más básicas para resaltar un texto, Para colocar cualquier palabra en cursiva solo necesitarás colocar un * (Asterisco) alrededor de la palabra
Código:
*Mañana comeré pizza*
Resultado:
Mañana comeré pizza

2) Negrita

Para colocar cualquier palabra en negrilla solo necesitaremos colocarle dos ** (Asteriscos) alrededor de dicha palabra de la siguiente forma:
Código:
**Tengo hambre**
Resultado:
Tengo hambre

3) Negrita y cursiva

Para colocar cualquier palabra en negrilla y cursiva solo necesitaremos colocarle tres *** (Asteriscos) alrededor de dicha palabra de la siguiente forma:
Código:
***Buscaminas***
Resultado:
Buscaminas

4) Títulos

Para colocar un título de cualquier tamaño se utilizan los # (numerales) seguido de un espacio, mientras más numerales la letra será más pequeña:

Código:
# Los colores
## Los colores
### Los colores
#### Los colores
##### Los colores
###### Los colores

Resultado:

Los colores

Los colores

Los colores

Los colores

Los colores
Los colores

5) Citas

Para realizar una cita textual de otro sitio se utiliza el símbolo de > (Mayor que) seguido de un espacio antes de la oración

Código:
> El hombre nace libre, y en todas partes halla cadenas. De los demás se cree el amo y es de sí mismo el más esclavo.

Resultado:

"El hombre nace libre, y en todas partes halla cadenas. De los demás se cree el amo y es de sí mismo el más esclavo" Jean Jacques.

6) Centrado

Para centrar un texto o incluso una imagen necesitarás encerrar esto que deseas centrar en el siguiente código:

<div class="text-center"> (Este código deberá ir al principio, seguido de enter)
Este código es perfecto para los títulos (Texto, seguido de enter)
</div> (Este código deberá ir al final para cerrar)

Resultado:

Este código es perfecto para los títulos

7) Justificado

Para colocar los párrafos de tu texto de forma justificada necesitarás colocar los siguientes códigos de la misma forma en que centrabas un texto:

Código:
<div class="text-justify"> (Este código deberá ir al principio)

Este código es perfecto para los párrafos porque nos ayuda a que tenga una apariencia más ordenadas, estructurada y visualmente es más agradable. (Texto)

</div> (Este código deberá ir al final para cerrar)

Resultado:

Este código es perfecto para los párrafos porque nos ayuda a que tenga una apariencia más ordenadas, estructurada y visualmente es más agradable.

8) Librillo

Para esto utilizamos códigos que coloquen nuestros textos tanto a la derecha como a la izquierda, Por ejemplo:

Código:

<div class="pull-right">

**PUNTO DE FUGA**
Un punto de fuga es aquel lugar de la imagen a donde la mayoría de las líneas se dirigen, y sirve para darnos a entender que nuestro principal objetivo que dirigir nuestra mirada hacia este punto.

</div>

<div class="pull-left">

![IMG_1284.jpg](https://steemitimages.com/DQmPKLKbxcDvVnTuVtMN1cGnEbSupdbb8CzQYE8nVfXEZGR/IMG_1284.jpg)

</div>

Como podemos observar hay un Código que usamos para colocar lo que queremos colocar del lado derecho y otro para el lado izquierdo cada uno cerrado con </div>.

Resultado:

PUNTO DE FUGA
Un punto de fuga es aquel lugar de la imagen a donde la mayoría de las líneas se dirigen, y sirve para darnos a entender que nuestro principal objetivo que dirigir nuestra mirada hacia este punto.

IMG_1284.jpg


Imágenes

1) Insertar imagen

Para insertar una imagen hay dos formas que son las más sencillas, la primera es importar desde nuestra Pc y la segunda es a través de un servidor de imágenes como www.imgur.com, aquí podemos cambiarle el tamaño a la foto, si lo deseamos, para luego copiar el link directo que es el que necesitaremos.

También podemos irnos a la búsqueda de imágenes en Google y copiar la ruta de la imagen. Solo basta con esos links para que el lenguaje lo reconozca.

2) Gif

Esta es una forma sencilla para condensar el contenido de una forma divertida, solo basta con entrar en www.giphy.com y seguir los pasos, al momento de que nuestro Gif esté listo solo copiamos la ruta de la imagen y la pegamos en la parte de nuestro post que nos parezca más conveniente.
Por ejemplo:
Este es el código de un gif: https://media.giphy.com/media/2dhCfDUZnzPVRhZKbc/giphy.gif

Resultado:

3) Galería de imágenes

Para colocar varias imágenes en un mismo post también puedes optar por colocar una galería, para ello deberás contar con los siguientes códigos:

|![IMG_1284.jpg](https://steemitimages.com/DQmPKLKbxcDvVnTuVtMN1cGnEbSupdbb8CzQYE8nVfXEZGR/IMG_1284.jpg)|![IMG_1284.jpg](https://steemitimages.com/DQmPKLKbxcDvVnTuVtMN1cGnEbSupdbb8CzQYE8nVfXEZGR/IMG_1284.jpg)|
|---|---|

Resultado:

IMG_1284.jpgIMG_1284.jpg

Tablas y listas

1) Tablas

  • Para colocar tablas usamos el mismo código que usábamos en las galerías, este símbolo | sirve para definir cada celda.
  • Y el término |---|---| nos es útil para definir el encabezado, sin su utilización el código no será reconocido.
  • Cabe destacar que las tablas podrán tener las filas y columnas que se desee alterando dicho código:

|Ganador Nro. 1|Ganador Nro. 2|Ganador Nro. 3|
|---|---|---|
|Pepe Delgado|Fulanito|Mengano|

Resultado:

Ganador Nro. 1Ganador Nro. 2Ganador Nro. 3
Pepe DelgadoFulanitoMengano

Nota: Para colocar el texto de las celdas centrado y dar una apariencia más agradable solo se modificará el código de la siguiente forma:

|<center>Ganador Nro. 1</center>|<center>Ganador Nro. 2</center>|<center>Ganador Nro. 3</center>|
|---|---|---|
|<center>Pepe Delgado</center>|<center>Flunito</center>|<center>Mengano</center>|

Resultado:

Ganador Nro. 1
Ganador Nro. 2
Ganador Nro. 3
Pepe Delgado
Flunito
Mengano

2) Listas

Lista

Para crear una lista o tabla de contenido se pueden utilizar números, – o *. Siempre alineados con la primera letra del término anterior.

1. Primer término
     - Segundo término
        * Tercer término

Resultado:

  1. Primer término
    • Segundo término
      • Tercer término

Fuentes

Para colocar las fuentes de una imagen o un texto necesitamos usar el siguiente código:
[Fuente](https://steemit.com/@mery.morales25)
Es importante colocar la palabra clave entre corchetes seguido del link entre paréntesis, sin espacios de por medio.

Resultado:
Fuente


Separador

Para colocar un simple separador como los de este post solo necesitarás colocar tres veces piso _ sin espacios así: ___


Videos de Youtube

Para colocar un video de Youtube solo basta con colocar la URL del video en el post y el lenguaje se encargará de colocarlo automáticamente.


Emojis

Para colocar divertidos emojis en tus post o en el titulo solo necesitarás ver el siguiente artículo para saber que código pertenece al emoji que quieres usar:

Emojis

Muchas gracias por tomar el tiempo de leerme, espero que les haya gustado

Por último me encantaría invitarlos al Discord del proyecto @milkbox.info para que lo conozcan y participen en el:

https://discord.gg/YhbqDv

Sort:  

Tengo algun tiempo en Steemit y debo admitir que no entendi muy bien el funcionamiento de el MarkDown, pero gracias a ti acabo de comprenderlo a la perfección. De hecho puse el post en favoritos para abrirlo cada vez que necesite escribir algo. Te lo agradezco de verdad.

¡Un fuerte abrazo hermano!

Me alegra muchísimo que te haya sido útil, muchas gracias por leerme

¡Felicitaciones! ¡Este post ha sido galardonado con un 100% de votos positivos por @sorteo! Esta publicación se seleccionó entre todas las publicaciones recientes como ganadora de la lotería #128, que no tenía participantes válidos. ¡Puedes volver a ganar participando en la lotería habitual de @sorteo! Para nominar una publicación para la lotería regular, solo envíe 0.1 SBD o STEEM a @sorteo, e incluya la url de la publicación que le gustaría nominar como una nota. ¡Buena suerte!

Recien comienzo mi viaje en Steemit, asi que este blog me ha resultado de gran ayuda. Muchas gracias.

Muchos éxitos en este nuevo mundo mendy

Este post esta muy bien estructurado, gracias por compartir estas herramientas voy a comenzar a usarlas, estos códigos son muy útiles

Super útil tu post :) llevo un par de meses y aún estoy aprendiendo y queriendo mejorar mis post, muchisimas gracias.

De nada, me parece genial que quieras mejorar

Congratulations! This post has been upvoted from the communal account, @minnowsupport, by daysi.diaz from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.

If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.

Muchas Gracias por el post , es el mas claro que he leído :) ademas tiene ejemplos

De nada, gracias a ti por apreciarlo, esa era la idea

alli te va mi voto amiga de angel

Coin Marketplace

STEEM 0.27
TRX 0.21
JST 0.039
BTC 97426.90
ETH 3593.28
USDT 1.00
SBD 3.88